Customize Theme
/* Light mode */
:root {
--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) */
.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%;
}