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

@@ -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>
   );

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' },
       ]}
     />
   );