feat: Use Zustand #33

src/App.jsx

@@ -1,18 +1,19 @@
-import { h } from 'preact';
+import { h } from 'preact'
 import Home from './components/home'
-import { useDarkModeState }  from './hooks/useDarkMode'
+import { useDarkMode } from './stores/useDarkMode'
 import './styles/main.css'
 
 function App() {
-  const [isDark, setIsDark] = useDarkModeState()
-
-  const onChangeTheme = (arg) => {
-     setIsDark(arg)
-  }
+  const { theme, setTheme } = useDarkMode(({ theme, setTheme }) => ({
+    theme,
+    setTheme,
+  }))
+
+  const currentTheme = theme === 'dark' ? true : false
 
   return (
-    <div className={`main-container ${isDark && 'dark-mode'}`}>
-      <Home isDark={isDark} toggleDarkMode={onChangeTheme} />
+    <div className={`main-container ${currentTheme && 'dark-mode'}`}>
+      <Home isDark={currentTheme} toggleDarkMode={setTheme} />
     </div>
   )
 }

src/components/gradientPicker.jsx

@@ -8,7 +8,6 @@ import {
 import { TwitterPicker } from 'react-color'
 
 import './../styles/sideBar.css'
-import { useDarkModeState } from './../hooks/useDarkMode'
 
 function GradientPicker({ gradColors, onGradColorsChange, isDark }) {
   const [colorOne, setColorOne] = useState(gradColors.colorOne)

src/stores/useDarkMode.js

@@ -0,0 +1,17 @@
+import create from 'zustand'
+import { persist } from 'zustand/middleware'
+
+const DARK = 'dark'
+const LIGHT = 'light'
+
+export const useDarkMode = create(
+  persist(
+    (set, get) => ({
+      // default theme
+      theme: LIGHT,
+
+      setTheme: () => set({ theme: get().theme === DARK ? LIGHT : DARK }),
+    }),
+    { name: 'theme' },
+  ),
+)

src/styles/main.css

@@ -932,10 +932,6 @@ video {
   margin: 0.75rem;
 }
 
-.m-5 {
-  margin: 1.25rem;
-}
-
 .m-6 {
   margin: 1.5rem;
 }
@@ -1561,6 +1557,14 @@ video {
     flex-direction: row;
   }
 
+  .md\:h-10 {
+    height: 2.5rem;
+  }
+
+  .md\:w-10 {
+    width: 2.5rem;
+  }
+
   .md\:w-1\/5 {
     width: 20%;
   }
@@ -1604,6 +1608,14 @@ video {
       max-width: 1280px;
     }
   }
+
+  .lg\:h-12 {
+    height: 3rem;
+  }
+
+  .lg\:w-12 {
+    width: 3rem;
+  }
 }
 
 @media (min-width: 1280px) {