Store theme in local to persist

oj-lab · Feb 7, 2024 · bd315c7 · bd315c7
1 parent ad4865a
commit bd315c7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 53 deletions.
diff --git a/src/layouts/DarkLightToggle.tsx b/src/layouts/DarkLightToggle.tsx
@@ -1,29 +1,39 @@
+import React from "react";
+
 export default function DarkLightToggle() {
+  const [isdark, setIsdark] = React.useState(
+    localStorage.getItem('isdark') === 'true' ? true : false
+  );
+  React.useEffect(() => {
+    localStorage.setItem('isdark', JSON.stringify(isdark));
+  }, [isdark]);
   return (
     <label className="swap swap-rotate">
       {/* this hidden checkbox controls the state */}
       <input
         type="checkbox"
         className="theme-controller h-12 w-12 rounded-full hover:bg-[var(--fallback-bc,oklch(var(--bc)/0.2))]"
-        value="light"
-        data-set-theme="light"
+        value="dark"
+        data-set-theme="dark"
         data-key="theme"
+        checked={isdark}
+        onChange={()=>setIsdark(!isdark)}
       />
-      {/* moon icon */}
+      {/* sun icon */}
       <svg
-        className="swap-off h-6 w-full self-center fill-current"
+        className="swap-on h-6 w-full self-center fill-current"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
       >
-        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
       </svg>
-      {/* sun icon */}
+      {/* moon icon */}
       <svg
-        className="swap-on h-6 w-full self-center fill-current"
+        className="swap-off h-6 w-full self-center fill-current"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
       >
-        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
       </svg>
     </label>
   );

diff --git a/src/layouts/ThemeMenu.tsx b/src/layouts/ThemeMenu.tsx
@@ -9,6 +9,11 @@ interface ThemeMenuProps {
 const ThemeMenu: React.FC<ThemeMenuProps> = (props) => {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
+  const [theme, setTheme] = React.useState(localStorage.getItem('theme'));
+  React.useEffect(() => {
+    localStorage.setItem('theme', theme===null?'default':theme);
+  }, [theme]);
+  const themeList = ['default', 'retro', 'cyberpunk', 'valentine', 'aqua'];
 
   React.useEffect(() => {
     document?.activeElement instanceof HTMLElement &&
@@ -58,51 +63,21 @@ const ThemeMenu: React.FC<ThemeMenuProps> = (props) => {
           tabIndex={0}
           className="menu dropdown-content z-[2] w-32 rounded-box bg-base-100 p-2 shadow-2xl"
         >
-          <li>
-            <input
-              type="radio"
-              name="theme-dropdown"
-              className="theme-controller btn btn-ghost btn-sm btn-block justify-start font-normal"
-              aria-label="Default"
-              value="default"
-            />
-          </li>
-          <li>
-            <input
-              type="radio"
-              name="theme-dropdown"
-              className="theme-controller btn btn-ghost btn-sm btn-block justify-start font-normal"
-              aria-label="Retro"
-              value="retro"
-            />
-          </li>
-          <li>
-            <input
-              type="radio"
-              name="theme-dropdown"
-              className="theme-controller btn btn-ghost btn-sm btn-block justify-start font-normal"
-              aria-label="Cyberpunk"
-              value="cyberpunk"
-            />
-          </li>
-          <li>
-            <input
-              type="radio"
-              name="theme-dropdown"
-              className="theme-controller btn btn-ghost btn-sm btn-block justify-start font-normal"
-              aria-label="Valentine"
-              value="valentine"
-            />
-          </li>
-          <li>
-            <input
-              type="radio"
-              name="theme-dropdown"
-              className="theme-controller btn btn-ghost btn-sm btn-block justify-start font-normal"
-              aria-label="Aqua"
-              value="aqua"
-            />
-          </li>
+          {themeList.map((x)=>{
+            return (
+              <li key={x}>
+                <input
+                type="radio"
+                name="theme-dropdown"
+                className="theme-controller btn btn-ghost btn-sm btn-block justify-start font-normal"
+                aria-label={x[0].toUpperCase() + x.slice(1)}
+                value={x}
+                checked={theme===x}
+                onChange={()=>{setTheme(x)}}
+                />
+              </li>
+            )
+          })}
         </ul>
       </div>
     </>