71 lines
2.4 KiB
CSS
71 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ── Dark mode (system preference) ──────────────────────────────────────── */
|
|
/* Remap Tailwind's color variables so all existing utilities adapt automatically. */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root, :host {
|
|
/* Neutrals — invert the gray scale */
|
|
--color-white: oklch(14.5% 0.015 260);
|
|
--color-black: oklch(98% 0.002 248);
|
|
--color-gray-50: oklch(17.5% 0.02 260);
|
|
--color-gray-100: oklch(21% 0.024 265);
|
|
--color-gray-200: oklch(27.8% 0.025 257);
|
|
--color-gray-300: oklch(37.3% 0.025 260);
|
|
--color-gray-400: oklch(55.1% 0.02 264);
|
|
--color-gray-500: oklch(60% 0.02 264);
|
|
--color-gray-600: oklch(70.7% 0.017 261);
|
|
--color-gray-700: oklch(80% 0.012 258);
|
|
--color-gray-800: oklch(87.2% 0.008 258);
|
|
--color-gray-900: oklch(93% 0.005 265);
|
|
--color-gray-950: oklch(96.7% 0.003 265);
|
|
|
|
/* Green — darken light tints, lighten dark shades */
|
|
--color-green-50: oklch(20% 0.04 155);
|
|
--color-green-100: oklch(25% 0.06 155);
|
|
--color-green-200: oklch(30% 0.08 155);
|
|
--color-green-300: oklch(42% 0.12 154);
|
|
--color-green-700: oklch(75% 0.15 150);
|
|
--color-green-800: oklch(80% 0.12 150);
|
|
|
|
/* Red */
|
|
--color-red-50: oklch(22% 0.04 17);
|
|
--color-red-200: oklch(32% 0.06 18);
|
|
--color-red-600: oklch(65% 0.2 27);
|
|
--color-red-700: oklch(72% 0.18 27);
|
|
--color-red-800: oklch(77% 0.15 27);
|
|
|
|
/* Blue */
|
|
--color-blue-100: oklch(22% 0.04 255);
|
|
--color-blue-600: oklch(62% 0.2 263);
|
|
--color-blue-700: oklch(72% 0.17 264);
|
|
--color-blue-800: oklch(77% 0.15 265);
|
|
|
|
/* Orange */
|
|
--color-orange-100: oklch(25% 0.05 75);
|
|
--color-orange-800: oklch(78% 0.13 37);
|
|
|
|
/* Yellow */
|
|
--color-yellow-100: oklch(25% 0.06 103);
|
|
--color-yellow-700: oklch(72% 0.12 66);
|
|
--color-yellow-800: oklch(77% 0.1 62);
|
|
|
|
/* Violet */
|
|
--color-violet-100: oklch(22% 0.04 295);
|
|
--color-violet-200: oklch(28% 0.06 294);
|
|
--color-violet-400: oklch(45% 0.14 293);
|
|
--color-violet-600: oklch(60% 0.2 293);
|
|
--color-violet-800: oklch(75% 0.18 293);
|
|
|
|
/* Purple */
|
|
--color-purple-100: oklch(22% 0.04 307);
|
|
--color-purple-800: oklch(75% 0.17 304);
|
|
|
|
/* Pink */
|
|
--color-pink-100: oklch(22% 0.04 342);
|
|
--color-pink-800: oklch(75% 0.15 4);
|
|
|
|
/* Amber */
|
|
--color-amber-400: oklch(80% 0.17 84);
|
|
}
|
|
}
|