Customizing System Themes

Customizing the default system themes involves defining the $ct-themes map in your variables file. Here’s the default definition inside css-theming:

$ct-themes: (
  'default': (
    'brightness': 'light',
    // 'colors': overrides $colors-[light|dark]
    // 'use-colors': if given, specifies which colors from the default palette to include
    // 'colors-text-scale': overrides $colors-text-scale-[light|dark]
    // 'semantic-colors': overrides $semantic-colors
    // 'font': overrides $font
    // 'text-color': overrides $text-color-[light|dark]
    // 'bg-main': overrides $bg-main-[light|dark]
    // 'bg-input': overrides $bg-input-[light|dark]
    // 'swatches': overrides $swatches
    // 'fg-target': overrides auto computed fg targets
    // 'fg-swatches': overrides $fg-swatches-[light|dark]
    // 'bg': overrides $bg-[light|dark]
    // 'bg-focus': overrides $bg-focus-[light|dark]
    // 'bd': overrides $bd-[light|dark]
    // 'bd-focus': overrides $bd-focus-[light|dark]
  ),
  'default-dark': (
    'brightness': 'dark',
  ),
) !default;

Some of the theme props are well known by css-theming and it’ll try to fall back to defaults when you don’t override them. All those props are mentioned in the code snippet above as comments. The only required prop is brightness.

---

In addition to those well-known props, you can add whatever prop you want to change between themes. We’ll discuss this later. Next, let’s focus on customizing colors.