Theming
Theming is the ability to style various aspects of our website differently depending on a context, while still maintaining visual appeal. It could be as simple as changing colors and backgrounds or font-sizes and icons. In CSS, we can achieve theming by piecing together various CSS variables (props) in a context (e.g, black and white) to enable better presentation of an application.
Most components will need to be able to change colors based on a page theme. That means we need to use CSS variables to define those values. The project will not use for the time beeing page level theming. It will be at component level. Even so we will be using the same features to support it, we will just have to inline the theme colors at each component.
The css variables used to define a theme are:
| CSS Custom property | Description |
|---|---|
--lta-theme--1 | The theme primary color |
--lta-theme--2 | The theme secondary color |
--lta-theme--on-1 | Text color on top of a primary background |
--lta-theme--on-2 | Text color on top of a secondary background |
Theme variables can be set at any parent element or direclty to the component root.
Either by using <div style="--lta-theme--1: #BCCF00"> or <div style="--lta-theme--1: var(--color-lta-accent-bright-green)">
Another way is to apply a class that sets the CSS variable to the desired value.
For example: .u-lta-theme--1-lta-blue.
You can find all of them under the color foundation page.
Theme color can be set as font color using the class .u-text-theme--1
Murray and Salisbury narrowly beaten in quarter-finals
Andy Murray and Joe Salisbury exited the men’s doubles event in the 2020 Tokyo Olympics following a tight 4-6 7-6 (2) 10-7 loss against Croatian pair Ivan Dodig and Marin Cilic.
