soconnor/personal-website
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Switch dark mode from class-based to CSS media queries

Browse Source 
- 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>
This commit is contained in:
Sean O'Connor
2026-05-11 02:04:25 -04:00
parent 1bfa45ea1b
commit 7e3821d0fa
2 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+27 -25
View File
@@ -72,31 +72,33 @@
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
.dark { @media (prefers-color-scheme: dark) {
--background: 222.2 84% 4.9%; :root {
--foreground: 210 40% 98%; --background: 222.2 84% 4.9%;
--card: 222.2 84% 4.9%; --foreground: 210 40% 98%;
--card-foreground: 210 40% 98%; --card: 222.2 84% 4.9%;
--popover: 222.2 84% 4.9%; --card-foreground: 210 40% 98%;
--popover-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%;
--primary: 210 40% 98%; --popover-foreground: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%; --primary: 210 40% 98%;
--secondary: 217.2 32.6% 17.5%; --primary-foreground: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%;
--muted: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%;
--muted-foreground: 215 20.2% 65.1%; --muted: 217.2 32.6% 17.5%;
--accent: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%;
--accent-foreground: 210 40% 98%; --accent: 217.2 32.6% 17.5%;
--destructive: 0 62.8% 30.6%; --accent-foreground: 210 40% 98%;
--destructive-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%;
--border: 217.2 32.6% 17.5%; --destructive-foreground: 210 40% 98%;
--input: 217.2 32.6% 17.5%; --border: 217.2 32.6% 17.5%;
--ring: 212.9 100% 50%; --input: 217.2 32.6% 17.5%;
--chart-1: 217.2 91.2% 59%; --ring: 212.9 100% 50%;
--chart-2: 160 84% 39%; --chart-1: 217.2 91.2% 59%;
--chart-3: 30 80% 50%; --chart-2: 160 84% 39%;
--chart-4: 280 65% 60%; --chart-3: 30 80% 50%;
--chart-5: 340 75% 55%; --chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
} }
} }
tailwind.config.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import typography from "@tailwindcss/typography";
import tailwindAnimate from "tailwindcss-animate"; import tailwindAnimate from "tailwindcss-animate";
export default { export default {
darkMode: "class", darkMode: "media",
content: ["./src/**/*.tsx", "./src/**/*.mdx"], content: ["./src/**/*.tsx", "./src/**/*.mdx"],
theme: { theme: {
extend: { extend: {