ArdoTheme
On this page
Themes the site: brand, accent, and neutral hues, saturation, callout hues,
fonts, and any design token. It renders the CSS variables into a <style>
element, so the theme is in the prerendered HTML. ArdoRoot renders it from
its theme prop; a root built from ArdoLayout renders it itself.
import { ArdoTheme } from "ardo/ui"
<ArdoTheme />
Props
| Name | Type | Required | Description |
|---|---|---|---|
color | ArdoHue | No | Brand hue for links, buttons, focus rings, and the hero. Default "berry". |
accent | ArdoHue | No | Accent hue for secondary highlights and code surfaces. Defaults to a complement of color. |
neutral | ArdoHue | No | Hue of backgrounds, borders, text, header, and sidebar. Defaults to color. |
chroma | number | { color?: number; accent?: number; neutral?: number } | No | Saturation multipliers. 1 keeps Ardo's palette, 0.4 mutes it, and 0turns a role gray. A number applies to color and accent. |
status | ArdoStatusHues | No | Callout hues; Ardo derives text, surface, and border for light and dark mode. |
fonts | { body?: string; heading?: string; mono?: string } | No | Font stacks. Load the fonts yourself, for example with Fontsource. |
tokens | ArdoThemeTokens | No | Token values for both color schemes, such as { radius: { base: "0.25rem" } }. |
light | ArdoThemeTokens | No | Token values for light mode only. |
dark | ArdoThemeTokens | No | Token values for dark mode only. |
Props type: ArdoThemeProps
Example
<ArdoTheme color="blue" neutral="slate" fonts={{ body: '"Inter Variable", system-ui' }} />