Introduction > Themes

With Feo CSS it is possible to define multiple themes. Within a theme, color-based custom properties are generated. In $feo-dark-theme and $feo-light-theme you define lists similar to $feo-colors. The difference, however, is that you don't set the color, but you set a reference to a color in $feo-colors, as shown below. This results in themes being created that can be applied using data-theme on elements.

If you have a duplicate name between $feo-colors and $feo-dark/light-theme, the $feo-colors one will take precedence.

The generated custom properties are defined in a @media (prefer-color-scheme: dark/light) scoping.

scss$feo-dark-theme: (
    'back': 'black',
    'front': 'white'
);

.bg-back {
    background-color: var(--color-back);
}

The utility classes are generated based on the first defined theme. If not all themes have the same colors defined, you will miss utility classes, or classes will be broken.