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%;
}
.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%;
}
}
}
tailwind.config.ts
+1 -1
View File
@@ -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: {