Themes
Theming is all CSS custom properties. Override the seed colors and every scale below is regenerated from them.
Primary scale
Buttons, focus rings, anything interactive. The whole scale comes
from --ui-primary, which takes a
light-dark() value if you want a different tone per
theme.
Neutral scale
Text, borders, and backgrounds. Override --ui-neutral to
shift them warmer or cooler.
Constructive scale
Success and confirmation states. Override
--ui-constructive.
Destructive scale
Errors and destructive actions. Override
--ui-destructive.
Color scales
Six accents for whatever else needs a color. Override
--ui-color1 through --ui-color6.
Customizing
Override seed colors on :root after importing the
stylesheet. Use light-dark() on
--ui-primary for per-theme control:
:root {
/* Same primary for both themes */
--ui-primary: #6366f1;
/* Or tune per-theme with light-dark() */
--ui-primary: light-dark(#4f46e5, #818cf8);
--ui-neutral: #6b7280;
}Dark mode
@erikt/ui follows prefers-color-scheme: dark on its own.
To pin a mode, set color-scheme on any element:
<html style="color-scheme: light">
...
</html>
<html style="color-scheme: dark">
...
</html>