Colors
The color system is built on CSS custom properties. Override --ds-primary to customize the entire theme.
Customization
app/assets/theme.css
/* app/assets/theme.css */
:root {
--ds-primary: #0070f3; /* blue */
--ds-primary-hover: #0060d0;
--ds-primary-subtle: #e8f1ff;
--ds-primary-muted: #cce0ff;
--ds-ring: #0070f3;
}
.dark {
--ds-primary: #60a5fa;
--ds-primary-hover: #93c5fd;
--ds-primary-subtle: #0c1d3e;
--ds-primary-muted: #1a3366;
}Primary
Violet #7f00ff — the main brand color.
primary
--ds-primary
primary-hover
--ds-primary-hover
primary-subtle
--ds-primary-subtle
primary-muted
--ds-primary-muted
primary-fg
--ds-primary-fg
Neutral
Zinc-based neutral scale for backgrounds, borders, and text.
bg
--ds-bg
bg-subtle
--ds-bg-subtle
bg-muted
--ds-bg-muted
border
--ds-border
fg-subtle
--ds-fg-subtle
fg-muted
--ds-fg-muted
fg
--ds-fg
Semantic
Status colors with subtle surface variants.
danger
--ds-danger
danger-subtle
--ds-danger-subtle
success
--ds-success
success-subtle
--ds-success-subtle
warning
--ds-warning
warning-subtle
--ds-warning-subtle
info
--ds-info
info-subtle
--ds-info-subtle