move theme toggling to custom hook

src/App.tsx

@@ -8,16 +8,16 @@ import Country from 'models/Country';
 import { Wrapper } from './App.styles';
 import Home from 'pages/Home/Home';
 import CountryDetails from 'pages/CountryDetails/CountryDetails';
-import Theme from 'enums/Theme';
+import useDarkMode from 'hooks/useDarkMode';
 
 function App() {
   const [countries, setCountries] = useState<Country[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedRegion, setSelectedRegion] = useState<string>('All');
   const [filteredCountries, setFilteredCountries] = useState<Country[]>([]);
-  const [theme, setTheme] = useState(Theme.Light);
   const [isLoading, setIsLoading] = useState(true);
   const [isError, setIsError] = useState(false);
+  const [theme, themeToggler] = useDarkMode();
 
   useEffect(() => {
     getCountries()
@@ -45,23 +45,11 @@ function App() {
     }
   }, [countries, selectedRegion]);
 
-  const toggleTheme = (): void => {
-    if (theme === Theme.Light) {
-      setTheme(Theme.Dark);
-    } else {
-      setTheme(Theme.Light);
-    }
-  };
-
-  useEffect(() => {
-    document.body.className = theme;
-  }, [theme]);
-
   return (
     <Router>
       <Wrapper>
         <GlobalStyles />
-        <Header toggleTheme={toggleTheme} theme={theme} />
+        <Header toggleTheme={themeToggler} theme={theme} />
         <Route exact path="/">
           <Home
             searchQuery={searchQuery}

src/hooks/useDarkMode.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState, useCallback } from 'react';
+import Theme from 'enums/Theme';
+
+const useDarkMode = (): [string, () => void] => {
+  const [theme, setTheme] = useState<string>(Theme.Light);
+
+  const setMode = useCallback((mode: string) => {
+    window.localStorage.setItem('theme', mode);
+    setTheme(mode);
+    document.body.className = mode;
+  }, []);
+
+  const themeToggler = (): void => {
+    theme === Theme.Light ? setMode(Theme.Dark) : setMode(Theme.Light);
+  };
+
+  useEffect(() => {
+    const localTheme = window.localStorage.getItem('theme');
+    localTheme ? setTheme(localTheme) : setMode(Theme.Light);
+  }, [setMode]);
+
+  useEffect(() => {
+    document.body.className = theme;
+  }, [theme]);
+
+  return [theme, themeToggler];
+};
+
+export default useDarkMode;

src/styles/GlobalStyles.ts

@@ -3,6 +3,11 @@ import { createGlobalStyle } from 'styled-components';
 export const GlobalStyles = createGlobalStyle`
 
   :root {
+    --color-bg: hsl(0, 0%, 98%);
+    --color-text: hsl(200, 15%, 8%);
+    --color-input: hsl(0, 0%, 52%);
+    --color-elements: hsl(0, 0%, 100%);
+    --color-highlighted: #bde4ff;
     --fw-light: 300;
     --fw-semi-bold: 600;
     --fw-extra-bold: 800;