From 5e5946b152007848322fe3dbbf9c03d6e2051302 Mon Sep 17 00:00:00 2001
From: Keith Brosch <keithtbrosch@gmail.com>
Date: Wed, 19 Jun 2024 17:58:13 -0400
Subject: [PATCH] make light/dark mode theme persist on refresh

---
 public/data/Sahilll15.json         |  2 +-
 public/data/connectaryal.json      | 18 ++++++++++++++++--
 src/ProfilesList.json              |  2 +-
 src/components/Sidebar/Sidebar.jsx | 19 ++++++-------------
 src/hooks/useTheme.js              |  4 ++--
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/public/data/Sahilll15.json b/public/data/Sahilll15.json
index 3c733ad2..e50fd978 100644
--- a/public/data/Sahilll15.json
+++ b/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/",
diff --git a/public/data/connectaryal.json b/public/data/connectaryal.json
index 1756d77a..05d8073b 100644
--- a/public/data/connectaryal.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/src/ProfilesList.json b/src/ProfilesList.json
index a86b2964..dcf1efb0 100644
--- a/src/ProfilesList.json
+++ b/src/ProfilesList.json
@@ -426,4 +426,4 @@
   "Monalisha-Roy.json",
   "Sahilll15.json",
   "Kritika.json"
-]
\ No newline at end of file
+]
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 4ae74420..e19d61ee 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/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">
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
index 58675d75..855b3a0e 100644
--- a/src/hooks/useTheme.js
+++ b/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;