Feo CSS v3.0.0
  • Introduction
  • What is Feo CSS?
  • Getting started
  • Design tokens
  • Themes
  • Credits
  • Layout
  • Center
  • Cluster
  • Dialog
  • Holy grail
  • Masonry
  • Pancake
  • Sidebar
  • Stack
  • Switcher
  • Tiles
  • Utilities
  • Token-based
  • Flexbox, grid and gap
  • Others
  • Position
  • Typography
  • Made with ♥️ by Crinkles

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.

Category:
Introduction
Last modified:
8/2/2022, 11:38:56 AM