Theming
Light and dark through prefers-color-scheme and .dark, with step roles held constant and a theme color switcher for accent seeds.
A theme in Aura swaps hex values and keeps step roles. Step 9 is still the solid brand surface in the dark scheme. Step 12 is still primary text. The mechanism is CSS, not a parallel component skin.
Scheme
packages/registry/styles/globals.css sets the light scales on :root. @media (prefers-color-scheme: dark) reassigns the gray scale and the gray alpha steps. In that file the accent scale is repeated unchanged inside the dark query, so brand steps stay #bf91ec at --accent-9 unless an app overwrites them.
main is always background-color: var(--gray-1), which resolves to #f6f9ff in light and #0c122a in the dark query. Full tables are on the Color page.
Status pairs have a second override. Inside @layer base, .dark replaces info, success, danger, and warning:
| Token | .dark value |
|---|---|
--info | #0D2157 |
--info-contrast | #8CB4FF |
--success | #0B2E1E |
--success-contrast | #67CF9D |
--danger | #3C1405 |
--danger-contrast | #FF9469 |
--warning | #2A2402 |
--warning-contrast | #EFE08E |
Light status values live on @theme inline and are listed on the color page. .dark is a class. The media query is the scheme switch for the gray scale. An app that toggles .dark without the media query still needs to set the gray steps itself; this stylesheet only redefines gray inside prefers-color-scheme.
Theme color switcher
@aura/theme-color-switcher (ThemeColorSwitcher.tsx) is the tool for generating a new accent scale. It reads next-themes (resolvedTheme === "dark" → dark appearance) and seeds:
| Accent | Gray | Background | |
|---|---|---|---|
| Light | #964CE1 | #16204e | #fcfcfc |
| Dark | #964CE1 | #16204e | #0c122b |
Those seeds are the switcher’s defaults, stored under aura-theme-colors. They are not the :root values in globals.css (--accent-9 there is #bf91ec). generateRadixColors turns a seed into a 12-step scale. Components keep reading --accent-* and --gray-*.
A single seed color can fill accent, gray, and background for both light and dark. schemeFromSeed keeps the seed hue, lowers chroma for the gray companion, and sets a light and a dark background. The switcher applies that scheme immediately and still lets light and dark be edited on their own. An image can supply the seed: the switcher averages the image’s pixels and runs the same scheme.
Ladle preview colors in the same globals.css file (--ladle-bg-color-primary, --ladle-color-primary, and the rest) point at gray steps and --primary, so the story canvas follows the theme.
What theming does not cover
There is no token for “material” surfaces, blur levels, or a dark-mode shadow set. Depth stays the border and tonal system in Depth and elevation. High-contrast, increased-contrast, and forced-colors modes are not specified.