Untitled

c15t supports light and dark mode through the theme's colors and dark token groups. The active color scheme is determined by one of three methods:

1. Explicit setting via the colorScheme option
2. CSS class detection - c15t checks for .dark on the document element
3. System preference - matches prefers-color-scheme media query

How Dark Mode Works

When dark mode is active, c15t applies the dark token values as CSS variable overrides. Only tokens specified in dark are overridden - unset tokens fall back to the colors values. This also applies to textOnPrimary: if you omit it, c15t derives a readable foreground from the active primary color in that scheme.

const theme = {
  colors: {
    surface: '#ffffff', // Light mode
    text: '#1f2937', // Light mode
  },
  dark: {
    surface: '#1f2937', // Dark mode override
    text: '#f9fafb', // Dark mode override
    // primary is NOT set - inherits from colors.primary
  },
} satisfies Theme;