diff --git a/src/lib/components/DarkmodeToggle.svelte b/src/lib/components/DarkmodeToggle.svelte
index d451339..ba8b5b4 100644
--- a/src/lib/components/DarkmodeToggle.svelte
+++ b/src/lib/components/DarkmodeToggle.svelte
@@ -10,15 +10,22 @@
     return false;
   }
 
+	function updateBodyClass() {
+    document.body.className = darkmode ? "dark" : "light";
+	}
+
   let darkmode = $state(false);
 	const darkmodeToggleIcon = $derived(darkmode ? "🌝" : "🌚");
 
   function toggleDarkmode() {
     darkmode = !darkmode;
-    document.body.className = darkmode ? "dark" : "light";
+		updateBodyClass()
   }
 
-	onMount(() => darkmode = systemDarkModeEnabled())
+	onMount(() => {
+		darkmode = systemDarkModeEnabled()
+		updateBodyClass()
+	})
 </script>
 
   <div class="darkToggle">
diff --git a/static/style.css b/static/style.css
index f94a376..7fcd9bb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -28,7 +28,9 @@
 	font-style: normal;
 }
 
-:root {
+:root,
+.light {
+	color-scheme: light;
 	--bg: #f9f5f3;
 	--color: #1c1819;
 	--highlight: #eaddd5;
@@ -49,6 +51,29 @@
 	--muted: #7a6d6e;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		color-scheme: light dark;
+		--bg: #121010;
+		--color: #f4eeeb;
+		--highlight: #2b2325;
+		--theme: #eaddd5;
+
+		--positive: #3ddc84;
+		--negative: #ff6b63;
+		--warning: #ffb74d;
+		--pulse-positive: rgba(61, 220, 132, 0.6);
+		--pulse-negative: rgba(255, 107, 99, 0.6);
+		--pulse-warning: rgba(255, 183, 77, 0.6);
+
+		--border: 1px solid #2b2325;
+
+		--key: #9fb3ff;
+		--muted: #b0b0b0;
+		--card-bg: #303037;
+	}
+}
+
 body.dark {
 	--bg: #121010;
 	--color: #f4eeeb;