give dark mode some love 🖤

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-31 22:25:07 +02:00
parent ff31cc506c
commit 1665924073
77 changed files with 256 additions and 199 deletions

View File

@@ -4,89 +4,79 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--highlight: 220, 84%, 53%; /* #2266ec */
--slate-50: 210 40% 98%;
--slate-100: 210 40% 96.1%;
--slate-200: 210 40% 91.4%;
--slate-300: 210 40% 83.9%;
--slate-400: 210 40% 65.1%;
--slate-500: 210 40% 46.9%;
--slate-600: 210 40% 30.6%;
--slate-700: 210 40% 17.5%;
--slate-800: 210 40% 11.2%;
--slate-900: 210 40% 8.2%;
--slate-950: 210 40% 7.2%;
--def-100: 210 40% 98%; /* #F0F4F9 */
--def-200: 210 40% 96.1%; /* #E7ECF2 */
--def-300: 210 15.14% 89.41%; /* #DDE3E9 */
--def-400: 210 9.08% 75.05%; /* #B3BDC7 */
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--background: 0 0% 100%; /* #FFFFFF */
--foreground: 222.2 84% 4.9%; /* #0C162A */
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; /* #FFFFFF */
--card-foreground: 222.2 84% 4.9%; /* #0C162A */
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--popover: 0 0% 100%; /* #FFFFFF */
--popover-foreground: 222.2 84% 4.9%; /* #0C162A */
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%; /* #163049 */
--primary-foreground: 210 40% 98%; /* #F0F4F9 */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--secondary: 210 40% 96.1%; /* #E7ECF2 */
--secondary-foreground: 222.2 47.4% 11.2%; /* #163049 */
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%; /* #E7ECF2 */
--muted-foreground: 215.4 16.3% 46.9%; /* #798290 */
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 100% 97.25%;
--accent: 210 40% 96.1%; /* #E7ECF2 */
--accent-foreground: 222.2 47.4% 11.2%; /* #163049 */
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 212.73deg 26.83% 83.92%;
--destructive: 0 84.2% 60.2%; /* #F2677D */
--destructive-foreground: 0 100% 97.25%; /* #F8F9FB */
--border: 214.3 31.8% 91.4%; /* #E8EBF1 */
--input: 214.3 31.8% 91.4%; /* #E8EBF1 */
--ring: 212.73deg 26.83% 83.92%; /* #CDD6E2 */
--radius: 0.5rem;
}
.dark {
--background: 222.86 32.05% 12.02%;
--foreground: 210 40% 98%;
--highlight: 221.44 100% 62.04%;
--slate-950: 210 40% 98%;
--slate-900: 210 40% 96.1%;
--slate-800: 210 40% 91.4%;
--slate-700: 210 40% 83.9%;
--slate-600: 210 40% 65.1%;
--slate-500: 210 40% 46.9%;
--slate-400: 210 40% 30.6%;
--slate-300: 210 40% 17.5%;
--slate-200: 210 40% 11.2%;
--slate-100: 210 40% 8.2%;
--slate-50: 210 40% 7.2%;
--def-100: 0 0% 8%; /* #0f0f0f */
--def-200: 0 0% 13.12%; /* #212121 */
--def-300: 0 0% 15.1%; /* #262626 */
--def-400: 0 0% 25.23%; /* #404040 */
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--background: 0 0% 12.02%; /* #1e1e1e */
--foreground: 0 0% 98%; /* #fafafa */
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--card: 0 0% 10%; /* #1a1a1a */
--card-foreground: 0 0% 98%; /* #fafafa */
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--popover: 0 0% 10%; /* #1a1a1a */
--popover-foreground: 0 0% 98%; /* #fafafa */
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--primary: 0 0% 98%; /* #fafafa */
--primary-foreground: 0 0% 11.2%; /* #1c1c1c */
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--secondary: 0 0% 15.1%; /* #262626 */
--secondary-foreground: 0 0% 98%; /* #fafafa */
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--muted: 0 0% 15.1%; /* #262626 */
--muted-foreground: 0 0% 65%; /* #fafafa */
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--accent: 0 0% 15.1%; /* #262626 */
--accent-foreground: 0 0% 98%; /* #fafafa */
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--destructive: 0 0% 30.6%; /* #4e4e4e */
--destructive-foreground: 0 0% 98%; /* #fafafa */
--border: 0 0% 15.1%; /* #262626 */
--input: 0 0% 15.1%; /* #262626 */
--ring: 0 0% 83.9%; /* #d6d6d6 */
}
}
@@ -95,7 +85,7 @@
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply bg-card text-foreground;
}
.h1 {
@@ -144,7 +134,7 @@
}
.card {
@apply border border-border bg-background;
@apply border border-border bg-card;
}
}