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 accent and gray on :root:not(.light). .dark repeats that same dark scale outside @layer, so a class toggle wins over the light :root values. Step 9 stays #4015ca in both schemes. The dark hexes are the Somos Gente Digital ramp. The light ramp is generated from accent #4015ca, gray #7254cb, and background #ffffff.
main is always background-color: var(--gray-1), which resolves to #fcfaff in light and #100b21 in dark. Full tables are on the Color page.
Status pairs change with the scheme. .dark and the dark media query set:
| 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 :root and on @theme inline. They are listed on the color page. An app that sets .dark gets the full Somos Gente Digital accent, gray, and status scales. prefers-color-scheme: dark does the same unless the root has class light.
Theme color switcher
@aura/theme-color-switcher (ThemeColorSwitcher.tsx) opens from the Theme control in the docs header. The side sheet sits on the end of the viewport, wide enough to edit presets, and leaves the page visible. The docs sidebar keeps a separate light and dark toggle.
Each named preset stores accent and gray for light and for dark. The same accent and gray stay in both modes so the brand identity holds. Canvases are derived from that gray, the same way aura colors derives them. The side sheet edits accent and gray only; it does not include a background control. Applying a preset writes both modes into aura-theme-colors and paints the active appearance. Light and Dark then switch appearance without dropping the other half.
| Preset | Accent | Gray | Light canvas | Dark canvas |
|---|---|---|---|---|
| Aura | #4015ca | #7254cb | #faf9ff | #120e20 |
| Coral | #f84657 | #8c7375 | #fcf9f9 | #141011 |
Aura is the switcher’s default pair. Light :root in globals.css is still the generator pass from accent #4015ca, gray #7254cb, and background #ffffff (--accent-9 is #4015ca). Dark globals.css keeps the Somos Gente Digital hexes. generateRadixColors turns the active mode 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.