Customize Theme
/* Light mode — root + explicit-light subtrees (e.g. per-component
`data-color-scheme="light"`), scoped to the active theme. Both need
the same tokens so toggling a subtree back to light keeps the
customized palette. */
:root,
[data-color-scheme="light"] {
--k-primary: 206.1 100% 50%;
--k-primary-hover: 206.6 95.9% 48%;
--k-primary-foreground: 0 0% 100%;
--k-ring: 205.7 81.9% 65.3%;
--k-accent: 205 92.3% 94.9%;
--k-accent-foreground: 208 88.1% 42.9%;
--k-foreground: 223.6 29.7% 14.5%;
--k-card-foreground: 223.6 29.7% 14.5%;
--k-popover-foreground: 223.6 29.7% 14.5%;
--k-secondary-foreground: 223.6 29.7% 14.5%;
--k-muted-foreground: 220 11.7% 40.4%;
--k-border: 216.9 17.3% 85.3%;
--k-input: 216.9 17.3% 85.3%;
--k-muted: 216 17.2% 94.3%;
--k-secondary: 216 17.2% 94.3%;
--k-background: 240 20% 99%;
--k-card: 240 20% 99%;
--k-popover: 240 20% 99%;
--k-radius: 0.5rem;
}
/* Dark mode (automatic) */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--k-primary: 206.1 100% 50%;
--k-primary-hover: 209.7 100% 61.6%;
--k-primary-foreground: 0 0% 0%;
--k-ring: 206.1 100% 50%;
--k-accent: 212.1 69% 16.5%;
--k-accent-foreground: 209.8 100% 72%;
--k-foreground: 220 9.1% 93.5%;
--k-card-foreground: 220 9.1% 93.5%;
--k-popover-foreground: 220 9.1% 93.5%;
--k-secondary-foreground: 220 9.1% 93.5%;
--k-muted-foreground: 216 6.8% 71%;
--k-border: 213.3 7.7% 22.9%;
--k-input: 213.3 7.7% 22.9%;
--k-muted: 225 5.7% 13.7%;
--k-secondary: 225 5.7% 13.7%;
--k-background: 240 5.6% 7.1%;
--k-card: 240 5.6% 7.1%;
--k-popover: 240 5.6% 7.1%;
}
}
/* Dark mode (explicit, scopable to any subtree) */
[data-color-scheme="dark"] {
color-scheme: dark;
--k-primary: 206.1 100% 50%;
--k-primary-hover: 209.7 100% 61.6%;
--k-primary-foreground: 0 0% 0%;
--k-ring: 206.1 100% 50%;
--k-accent: 212.1 69% 16.5%;
--k-accent-foreground: 209.8 100% 72%;
--k-foreground: 220 9.1% 93.5%;
--k-card-foreground: 220 9.1% 93.5%;
--k-popover-foreground: 220 9.1% 93.5%;
--k-secondary-foreground: 220 9.1% 93.5%;
--k-muted-foreground: 216 6.8% 71%;
--k-border: 213.3 7.7% 22.9%;
--k-input: 213.3 7.7% 22.9%;
--k-muted: 225 5.7% 13.7%;
--k-secondary: 225 5.7% 13.7%;
--k-background: 240 5.6% 7.1%;
--k-card: 240 5.6% 7.1%;
--k-popover: 240 5.6% 7.1%;
}