The following example shows a designed Header with a Custom component to switch between two themes. In this case, there is a light mode, represented by a sun icon, and a dark mode, represented by a moon icon:
This example relies on the following Theme studio configuration:
| Color name | CSS variable | Dark mode | Light mode |
|---|---|---|---|
background |
--ft-custom-background |
#121212 |
#FAFAFA |
text |
--ft-custom-text |
#FAFAFA |
#121212 |
The header background references the --ft-custom-background variable. The text and icon colors of individual components reference the --ft-custom-text variable.
The Fluid Topics logo is an SVG image, in which the letters have the following inline style:
fill: var(--ft-custom-text);
This allows for the letters to adapt to the current theme.