c15t
Version:
Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.
36 lines (30 loc) • 1.3 kB
Markdown
title: Color Scheme
description: Reference page for color scheme.
group: reference
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
|Value|Behavior|
|--|--|
|`'light'`|Force light mode|
|`'dark'`|Force dark mode|
|`'system'`|Follow `prefers-color-scheme` media query|
|`null`|Disable - c15t won't manage color scheme|
## 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.
```tsx
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;
```