make light/dark mode theme persist on refresh

public/data/Sahilll15.json

@@ -1,6 +1,6 @@
 {
   "name": "Sahil Sanjay Chalke",
-  "location": "Mumbai, India 🇮🇳", 
+  "location": "Mumbai, India 🇮🇳",
   "bio": "FULL STACK DEV",
   "avatar": "https://avatars.githubusercontent.com/u/109215419?v=4",
   "portfolio": "https://sahilchalke.online/",

public/data/connectaryal.json

@@ -4,10 +4,24 @@
   "bio": "Senior Software Engineer with 5+ years of experience in building scalable applications.",
   "avatar": "https://github.com/connectaryal.png",
   "portfolio": "https://shivaaryal.com.np/",
-  "skills": ["HTML", "CSS", "JavaScript", "Tailwind CSS", "TypeScript", "React", "OOP", "Node.js", "PHP", "Laravel", "WordPress", "MYSQL", "Docker"],
+  "skills": [
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "Tailwind CSS",
+    "TypeScript",
+    "React",
+    "OOP",
+    "Node.js",
+    "PHP",
+    "Laravel",
+    "WordPress",
+    "MYSQL",
+    "Docker"
+  ],
   "social": {
     "GitHub": "https://github.com/connectaryal",
     "Twitter": "https://twitter.com/connectaryal",
     "LinkedIn": "https://www.linkedin.com/in/connectaryal"
   }
-}
+}

src/ProfilesList.json

@@ -426,4 +426,4 @@
   "Monalisha-Roy.json",
   "Sahilll15.json",
   "Kritika.json"
-]
+]

src/components/Sidebar/Sidebar.jsx

@@ -1,22 +1,15 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+import useTheme from '../../hooks/useTheme';
 
 function Sidebar() {
-  const [theme, setTheme] = useState('dark');
+  const [theme] = useState('dark');
+  const { toggle } = useTheme();
 
-  function toggleTheme() {
-    const htmlElement = document.documentElement;
-    const isDarkModeEnabled = htmlElement.classList.contains('dark');
-
-    if (isDarkModeEnabled) {
-      htmlElement.classList.remove('dark');
-      setTheme('light');
-    } else {
-      htmlElement.classList.add('dark');
-      setTheme('dark');
-    }
-  }
+  const toggleTheme = () => {
+    toggle();
+  };
   return (
     <div className="my-7 w-full border-r-2 border-borderSecondary px-7 font-spaceMono dark:border-borderColor md:h-[90vh] md:w-[23%]">
       <div className="mb-2 flex h-12 items-center gap-2.5">

src/hooks/useTheme.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 const useTheme = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
 
-  const toogleTheme = () => {
+  const toggle = () => {
     const newTheme = theme === 'light' ? 'dark' : 'light';
     setTheme(newTheme);
     localStorage.setItem('theme', newTheme);
@@ -13,7 +13,7 @@ const useTheme = () => {
     document.documentElement.className = theme;
   }, [theme]);
 
-  return { theme, toogleTheme };
+  return { theme, toggle };
 };
 
 export default useTheme;