Introduction to theming with Swatch
Now, you know how to use setters and getters to apply colors to your html blocks or components. But how can we leverage the power of Swatch to apply themes at the application level ?
How are themes represented in Swatch ?
In Swatch, a theme is an ensemble of CSS variables.
There are two themes provided by default : light
and dark
.
You have maybe already seen here the complete list of colors available in vanilla Swatch. Some of these colors are a bit special in the sense that they can be themed.
Here is a table of all the themable colors, as well as their light
(L) and dark
(D) default.
Main variable (L/D) | Light variant (L/D) | Dark variant (L/D) | Contrast color (L/D) |
---|---|---|---|
--background โโ | --light-background โโ | --dark-background โโ | --on-background โโ |
--heading โโ | --light-heading โโ | --dark-heading โโ | --on-heading โโ |
--subtitle โโ | --light-subtitle โโ | --dark-subtitle โโ | --on-subtitle โโ |
--metadata | --light-metadata | --dark-metadata | --on-metadata |
--link โโ | --light-link โโ | --dark-link โโ | --on-link โโ |
Example of applying a site-wide theme
Themes can be manually triggered using the class api ui-{themeName}
, that is to say ui-light
and ui-dark
. Said in another way : .ui-{themeName}
sets ALL of the themable variables.
The following example should give you a better idea of the theme api.
Some news article
A detailed reason for you to read the article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla ligula vel mollis ultrices. Proin sodales faucibus sodales. Ut libero nisi, venenatis in neque interdum, ullamcorper scelerisque erat. Phasellus non lectus nisl. Quisque vel laoreet libero. Cras mi ante, efficitur a tincidunt ac, cursus at metus. Morbi porttitor magna non ipsum porttitor, vitae scelerisque arcu ullamcorper. Aenean non sapien vel leo aliquam dictum in in metus. In et elit mauris. Pellentesque ac pharetra erat.
Of course, you can also apply other colors than theme variables to your content. In this case, if you apply a theme, these elements will keep their color, like the red block.
note
As you can see, triggering the dark theme is completely effortless, provided you have set the right variables to your content.
tip
Light theme provided as a default in :root. This means, the light theme is applied by default when you get any of the themable variables.