From 7e3821d0faad37a3f0ef87023fcc08dc395ba830 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Mon, 11 May 2026 02:04:25 -0400
Subject: [PATCH] Switch dark mode from class-based to CSS media queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tailwind.config.ts: darkMode "class" → "media"
- globals.css: .dark { } → @media (prefers-color-scheme: dark) { :root { } }

All dark: utility classes in components work automatically with either mode.
No toggle UI existed, so nothing else to remove.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/styles/globals.css | 52 ++++++++++++++++++++++--------------------
 tailwind.config.ts     |  2 +-
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1dcedfc..6693743 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -72,31 +72,33 @@
     --chart-5: 340 75% 55%;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.9 100% 50%;
-    --chart-1: 217.2 91.2% 59%;
-    --chart-2: 160 84% 39%;
-    --chart-3: 30 80% 50%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 222.2 84% 4.9%;
+      --foreground: 210 40% 98%;
+      --card: 222.2 84% 4.9%;
+      --card-foreground: 210 40% 98%;
+      --popover: 222.2 84% 4.9%;
+      --popover-foreground: 210 40% 98%;
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 11.2%;
+      --secondary: 217.2 32.6% 17.5%;
+      --secondary-foreground: 210 40% 98%;
+      --muted: 217.2 32.6% 17.5%;
+      --muted-foreground: 215 20.2% 65.1%;
+      --accent: 217.2 32.6% 17.5%;
+      --accent-foreground: 210 40% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 210 40% 98%;
+      --border: 217.2 32.6% 17.5%;
+      --input: 217.2 32.6% 17.5%;
+      --ring: 212.9 100% 50%;
+      --chart-1: 217.2 91.2% 59%;
+      --chart-2: 160 84% 39%;
+      --chart-3: 30 80% 50%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+    }
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 710f1a1..744923a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,7 @@ import typography from "@tailwindcss/typography";
 import tailwindAnimate from "tailwindcss-animate";
 
 export default {
-  darkMode: "class",
+  darkMode: "media",
   content: ["./src/**/*.tsx", "./src/**/*.mdx"],
   theme: {
     extend: {