Switch dark mode from class-based to CSS media queries

- 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:
2026-05-11 02:04:25 -04:00
parent 1bfa45ea1b
commit 7e3821d0fa
2 changed files with 28 additions and 26 deletions
+3 -1
View File
@@ -72,7 +72,8 @@
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
.dark { @media (prefers-color-scheme: dark) {
:root {
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--card: 222.2 84% 4.9%; --card: 222.2 84% 4.9%;
@@ -99,6 +100,7 @@
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
} }
}
@layer base { @layer base {
* { * {
+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: {