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:
@@ -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%;
|
||||||
@@ -98,6 +99,7 @@
|
|||||||
--chart-4: 280 65% 60%;
|
--chart-4: 280 65% 60%;
|
||||||
--chart-5: 340 75% 55%;
|
--chart-5: 340 75% 55%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
|
|||||||
+1
-1
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user