Toggle theme functionality

Author: realstoman

src/App.js

@@ -9,7 +9,7 @@ import Contact from './pages/Contact';
 
 function App() {
 	return (
-		<div className="App">
+		<div className=" bg-secondary-light dark:bg-primary-dark transition duration-500">
 			<Router>
 				<AppHeader></AppHeader>
 				<Routes>

src/components/AppHeader.js

@@ -1,15 +1,18 @@
 import { FiMoon, FiSun } from 'react-icons/fi';
 import { Link } from 'react-router-dom';
+import ThemeSwitcher from '../hooks/ThemeSwitcher';
 
 // import logoLight from '../images/logo-light.svg';
 import logoDark from '../images/logo-dark.svg';
 
 const AppHeader = () => {
+	const [activeTheme, setTheme] = ThemeSwitcher();
+
 	return (
 		<div>
 			<nav id="nav" className="sm:container sm:mx-auto">
 				{/* Header start */}
-				<div className="z-10 max-w-screen-lg xl:max-w-screen-xl block sm:flex sm:justify-between sm:items-center my-6">
+				<div className="z-10 max-w-screen-lg xl:max-w-screen-xl block sm:flex sm:justify-between sm:items-center py-6">
 					{/* Header menu links and small screen hamburger menu start */}
 					<div className="flex justify-between items-center px-4 sm:px-0">
 						<div>
@@ -103,12 +106,15 @@ const AppHeader = () => {
 
 						{/* Theme switcher large screen */}
 						<div
-							onClick="toggleTheme"
+							onClick={() => setTheme(activeTheme)}
 							aria-label="Theme Switcher"
 							className="ml-8 bg-primary-light dark:bg-ternary-dark px-3 py-2 shadow-sm rounded-xl cursor-pointer"
 						>
-							<FiMoon class="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light w-5" />
-							<FiSun class="text-gray-200 hover:text-gray-50 w-5" />
+							{activeTheme === 'dark' ? (
+								<FiMoon class="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light w-5" />
+							) : (
+								<FiSun class="text-gray-200 hover:text-gray-50 w-5" />
+							)}
 						</div>
 					</div>
 				</div>