Add a site-wide dark mode

2026-09-11 12:49:46 -05:00
parent a909db39b1
commit 960673bbc6
28 changed files with 745 additions and 340 deletions
@@ -2,8 +2,28 @@
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

+@custom-variant dark (&:where(.dark, .dark *));
+
@layer base {
+	html {
+		color-scheme: light;
+	}
+
+	html.dark {
+		color-scheme: dark;
+	}
+
+	.dark input:not([type='checkbox']):not([type='radio']),
+	.dark textarea,
+	.dark select {
+		background-color: var(--color-slate-900);
+		color: var(--color-slate-100);
+		border-color: var(--color-slate-700);
+	}
+
 	body {
+		background-color: var(--color-slate-50);
+		color: var(--color-slate-900);
 		font-family:
 			ui-sans-serif,
 			system-ui,
@@ -16,4 +36,9 @@
 		-webkit-font-smoothing: antialiased;
 		text-rendering: optimizeLegibility;
 	}
+
+	html.dark body {
+		background-color: var(--color-slate-950);
+		color: var(--color-slate-100);
+	}
 }