fetch dark mode from local db

Author: AmanuelCh

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@uidotdev/usehooks": "^2.4.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.3.28",
     "react": "^18.3.1",

package.json

@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { useLocalStorage } from '@uidotdev/usehooks';
 import CategoryList from './components/CategoryList';
 import TopicList from './components/TopicList';
 import MarkdownViewer from './components/MarkdownViewer';
 import Navbar from './components/Navbar';
 
 const App = () => {
-  const [isDark, setIsDark] = useState(false);
+  const [isDark, setIsDark] = useLocalStorage('isDark', false);
 
   const handleDarkToggle = () => {
     setIsDark(!isDark);
@@ -22,7 +23,10 @@ const App = () => {
         <div className='relative z-[-2] w-screen bg-white bg-[radial-gradient(60%_120%_at_50%_50%,hsla(0,0%,100%,0)_0,rgba(252,205,238,.5)_100%)]'></div>
       )}
       <Router>
-        <Navbar handleDarkToggle={handleDarkToggle} />
+        <Navbar
+          isDark={isDark}
+          handleDarkToggle={handleDarkToggle}
+        />
 
         <Routes>
           <Route

src/App.tsx

@@ -2,10 +2,11 @@ import { Link, useParams } from 'react-router-dom';
 import { PlaceholdersAndVanishInput } from './ui/input-component';
 
 type Props = {
+  isDark: boolean;
   handleDarkToggle: () => void;
 };
 
-const Navbar = ({ handleDarkToggle }: Props) => {
+const Navbar = ({ isDark, handleDarkToggle }: Props) => {
   const placeholders = [
     'Which Type to Use',
     'Function Declaration Syntax',
@@ -87,6 +88,7 @@ const Navbar = ({ handleDarkToggle }: Props) => {
             <label className='switch'>
               <input
                 type='checkbox'
+                checked={isDark}
                 onClick={handleDarkToggle}
               />
               <span className='slider'></span>