From ad8ea4acd6ec2506aa6fee9a6d440ed8980c9e18 Mon Sep 17 00:00:00 2001
From: TamHC <79314879+TamHC@users.noreply.github.com>
Date: Tue, 24 Jun 2025 21:00:31 +0800
Subject: [PATCH] allow changing theme by system detection

### 1. Updated Theme Provider (`src/components/theme/Provider.tsx`)

- Enabled system theme support by setting `enableSystem={true}`
- Changed default theme from "dark" to "system" so the app follows the user's system preference by default

### 2. Updated Theme Switcher (`src/components/theme/Switcher.tsx`)

- Added "System" option to the theme dropdown menu alongside "Light" and "Dark"
- Removed the custom system theme detection logic that was interfering with next-themes' built-in system detection
- Simplified the component to rely on next-themes' native system theme handling
---
 src/components/theme/Provider.tsx |  2 +-
 src/components/theme/Switcher.tsx | 19 +------------------
 2 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/src/components/theme/Provider.tsx b/src/components/theme/Provider.tsx
index 43e2714..efac152 100644
--- a/src/components/theme/Provider.tsx
+++ b/src/components/theme/Provider.tsx
@@ -7,7 +7,7 @@ const ThemeProviderComponent = ({
   children: React.ReactNode;
 }) => {
   return (
-    <ThemeProvider attribute="class" enableSystem={false} defaultTheme="dark">
+    <ThemeProvider attribute="class" enableSystem={true} defaultTheme="system">
       {children}
     </ThemeProvider>
   );
diff --git a/src/components/theme/Switcher.tsx b/src/components/theme/Switcher.tsx
index b1e7371..63cd897 100644
--- a/src/components/theme/Switcher.tsx
+++ b/src/components/theme/Switcher.tsx
@@ -20,24 +20,6 @@ const ThemeSwitcher = ({ className }: { className?: string }) => {
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    if (isTheme('system')) {
-      const preferDarkScheme = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      );
-
-      const detectThemeChange = (event: MediaQueryListEvent) => {
-        const theme: Theme = event.matches ? 'dark' : 'light';
-        setTheme(theme);
-      };
-
-      preferDarkScheme.addEventListener('change', detectThemeChange);
-
-      return () => {
-        preferDarkScheme.removeEventListener('change', detectThemeChange);
-      };
-    }
-  }, [isTheme, setTheme, theme]);
 
   // Avoid Hydration Mismatch
   if (!mounted) {
@@ -52,6 +34,7 @@ const ThemeSwitcher = ({ className }: { className?: string }) => {
       options={[
         { value: 'light', label: 'Light' },
         { value: 'dark', label: 'Dark' },
+        { value: 'system', label: 'System' },
       ]}
     />
   );