From dd4cd03f590cd615e373c43aff62c64bd0836dcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Acu=C3=B1a?= <danielnahuelacuna98@gmail.com>
Date: Tue, 28 May 2024 11:01:35 -0300
Subject: [PATCH] fix: remove duplicate theme logic

---
 index.html                           | 15 -----------
 src/components/Navigation/Navbar.tsx | 38 ++--------------------------
 2 files changed, 2 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index 0ca7c5ce..3886091d 100644
--- a/index.html
+++ b/index.html
@@ -32,20 +32,5 @@
     <div id="root"></div>
     <!-- Main JavaScript file -->
     <script type="module" src="/src/main.tsx"></script>
-    <!-- JavaScript to toggle dark mode -->
-    <script>
-      // Check user's theme preference or default to system preference
-      const themePreference =
-        localStorage.getItem('themePreference') ||
-        (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-      // Get the root HTML element
-      const rootElement = document.documentElement;
-      // Apply dark mode class if preferred theme is dark
-      if (themePreference === 'dark') {
-        rootElement.classList.add('dark-mode');
-      } else {
-        rootElement.classList.remove('dark-mode');
-      }
-    </script>
   </body>
 </html>
diff --git a/src/components/Navigation/Navbar.tsx b/src/components/Navigation/Navbar.tsx
index 51dcb998..59ab1481 100755
--- a/src/components/Navigation/Navbar.tsx
+++ b/src/components/Navigation/Navbar.tsx
@@ -6,7 +6,7 @@ import {
   Link,
   useLocation,
 } from 'react-router-dom';
-import { DropDownSearch, useAuth } from '../../index';
+import { DropDownSearch, useAuth, useTheme } from '../../index';
 import { fetchAdvancedSearch, type Anime } from '../..';
 import { FiSun, FiMoon, FiX /* FiMenu */ } from 'react-icons/fi';
 import { GoCommandPalette } from 'react-icons/go';
@@ -200,30 +200,6 @@ const SlashToggleBtn = styled.div<{ $isFocused: boolean }>`
   }
 `;
 
-const detectUserTheme = () => {
-  if (
-    window.matchMedia &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    return true;
-  }
-  return false;
-};
-
-const saveThemePreference = (isDarkMode: boolean) => {
-  localStorage.setItem('themePreference', isDarkMode ? 'dark' : 'light');
-};
-
-const getInitialThemePreference = () => {
-  const storedThemePreference = localStorage.getItem('themePreference');
-
-  if (storedThemePreference) {
-    return storedThemePreference === 'dark';
-  }
-
-  return detectUserTheme();
-};
-
 export const Navbar = () => {
   const { isLoggedIn, userData } = useAuth();
   const [isPaddingExtended, setIsPaddingExtended] = useState(false);
@@ -288,17 +264,7 @@ export const Navbar = () => {
     };
   });
 
-  const [isDarkMode, setIsDarkMode] = useState(getInitialThemePreference());
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark-mode', isDarkMode);
-  }, [isDarkMode]);
-
-  const toggleTheme = useCallback(() => {
-    const newIsDarkMode = !isDarkMode;
-    setIsDarkMode(newIsDarkMode);
-    saveThemePreference(newIsDarkMode);
-  }, [isDarkMode, setIsDarkMode]);
+  const { isDarkMode, toggleTheme } = useTheme();
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {