diff --git a/src/components/shared/DarkModeToggle.tsx b/src/components/shared/DarkModeToggle.tsx
index 9d7d4f22..657f45ee 100644
--- a/src/components/shared/DarkModeToggle.tsx
+++ b/src/components/shared/DarkModeToggle.tsx
@@ -1,19 +1,37 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { Moon, Sun } from 'lucide-react';
const DarkModeToggle = () => {
+ // Initialize from the class that was already set in index.html
const [isDarkMode, setIsDarkMode] = useState(() => {
- const theme = localStorage.getItem('theme');
- const isDark = theme === 'dark';
- if (isDark) {
- document.documentElement.classList.add('dark');
- } else {
- document.documentElement.classList.remove('dark');
- }
- return isDark;
+ const storedTheme = localStorage.getItem('theme');
+ const prefersDark = window.matchMedia(
+ '(prefers-color-scheme: dark)',
+ ).matches;
+ return storedTheme === 'dark' || (!storedTheme && prefersDark);
});
const [isHovered, setIsHovered] = useState(false);
+ useEffect(() => {
+ // Listen for system theme changes (only if no manual preference is set)
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ const handleThemeChange = (e: MediaQueryListEvent) => {
+ // Only update if user hasn't set a manual preference
+ if (!localStorage.getItem('theme')) {
+ const shouldBeDark = e.matches;
+ if (shouldBeDark) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ setIsDarkMode(shouldBeDark);
+ }
+ };
+
+ mediaQuery.addEventListener('change', handleThemeChange);
+ return () => mediaQuery.removeEventListener('change', handleThemeChange);
+ }, []);
+
const toggleDarkMode = () => {
if (isDarkMode) {
document.documentElement.classList.remove('dark');
@@ -32,115 +50,117 @@ const DarkModeToggle = () => {
const translateX = isDarkMode ? trackWidth - thumbWidth - padding : padding;
return (
-
+
+
+
+
+
+
+
+
+