Theme
Theme
Applies contrast and density to a subtree. Serre has one colour scheme, dark; high contrast and compact density are StyleX themes any subtree can force.
Examples
Default
Follows prefers-contrast
AccentDanger
High contrast
Forced
AccentDanger
Comfortable
Compact
Props
Theme
Applies contrast and density to everything inside it. Serre has one colour scheme, dark (ADR 0025); any subtree can force high contrast or compact density, and the docs app shows the same component both ways side by side.
| Prop | Type | Default | Description |
|---|---|---|---|
contrast? | "system" | "more" | "system" | `more` forces high contrast; `system` follows prefers-contrast. |
density? | "compact" | "comfortable" | "comfortable" | How tightly controls and rows are packed. |
surface? | boolean | false | Paint the surface colour behind the subtree, for a region that differs from the page. |
as? | ElementType | "div" | |
children | ReactNode | — |
Accessibility
- High contrast follows prefers-contrast: more by default, with no script, and can be forced for a subtree.
- Both forms are held to contrast minimums by a test over the token values; high contrast reaches 7:1 for text.
- Text colour is set again on the themed element, because inherited colour is resolved before it is inherited.