Color Palette

• bg
• bg-dark
• bg-light
• bg-lighter

• text
• text-subtle

• primary
• secondary
• tertiary

Color Scheme

Color properties are defined using the CSS light-dark color function.

--color-primary: light-dark(oklch(55% 0.14 45), oklch(75% 0.15 45));

The color scheme is set by user preference.

:root[data-theme='light'] {
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}