Colors
Every color is a CSS custom property. 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 in light
and dark mode.
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-mode control:
:root {
/* Same primary in light and dark */
--ui-primary: #6366f1;
/* Or tune per mode 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>