Docs
Customization
Override the tokens that drive color, type, spacing, and measure.
EldanCSS exposes a small token layer. Override the values after the stylesheet loads, or edit them in place.
Color
The palette is generated from --hue and --saturation. --hue shifts the accent and surface family; --saturation is a 0–1 multiplier. At 0, the palette becomes grayscale and accent lightness is lowered to preserve contrast.
Drag either slider to retint this documentation. Saturation 0 produces an accessible grayscale palette. Reset restores hue 241 and saturation 100%. The snippet below updates to match, ready to copy.
Copy this CSS
:root {
--hue: 241;
--saturation: 1;
}The palette inputs are:
| Token | Purpose |
|---|---|
--hue | Base hue, 0–360 |
--saturation | Saturation multiplier, 0–1; 0 is grayscale |
For finer control, override the individual color tokens:
| Token | Purpose |
|---|---|
--color-bg | Page background |
--color-surface | Inputs, articles, and details |
--color-text | Body and heading text |
--color-muted | Secondary text and markers |
--color-border | Dividers and control borders |
--color-accent | Links, buttons, focus rings, and selections |
--color-accent-hover | Hover state for accent surfaces |
--color-on-accent | Text placed on the accent color |
--color-code | Inline code and code block background |
--color-danger | Invalid form controls |
Forced schemes
Each token is declared with light-dark() and color-scheme: light dark, so the active scheme follows prefers-color-scheme unless a root selector forces one. Override tokens per scheme with an attribute selector:
:root[data-theme="light"] {
--color-bg: hsl(200 20% 98%);
}
:root[data-theme="dark"] {
--color-bg: hsl(200 20% 8%);
--color-accent: hsl(200 75% 72%);
}
When no data-theme is present, target @media (prefers-color-scheme: dark) instead. See Getting started
for a complete switcher.
Type and spacing
| Token | Purpose |
|---|---|
--font-sans | Body text |
--font-mono | Code and labels |
--font-heading | Headings (defaults to --font-mono) |
--measure | Maximum body width |
--text-base | Base font size |
--h1 … --h6 | Heading sizes |
--space-1 … --space-8 | Spacing scale |
:root {
--measure: 72ch;
--radius: 0.2rem;
--h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}
Headings use the monospace stack by default. Set --font-heading to any stack if you would rather not have monospace headings — for example, to match the body text:
:root {
--font-heading: var(--font-sans);
}
Toggles the headings on this page, or rolls a random stack from Modern Font Stacks. The snippet below follows along, ready to copy.
Heading 3 Example
Copy this CSS
:root {
--font-heading: var(--font-mono);
}Borders
--radius controls the small radius used by controls, code, and articles. --radius-lg is used for dialogs, popovers, and larger surfaces.
:root {
--radius: 0.25rem;
--radius-lg: 0.5rem;
}