Persist theme in local (#40)

* Store theme in local to persist * Prettier code * Fix dark light toggle in dark mode --------- Co-authored-by: slhmy <[email protected]>
oj-lab · Feb 7, 2024 · 26c5439 · 26c5439
1 parent f22747b
commit 26c5439
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 57 deletions.
diff --git a/src/components/markdown/MarkdownRender.tsx b/src/components/markdown/MarkdownRender.tsx
@@ -14,8 +14,8 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = (props) => {
     props.rehypePlugin === undefined
       ? []
       : props.rehypePlugin === "rehypeKatex"
-      ? [rehypeKatex]
-      : [rehypeMathjax];
+        ? [rehypeKatex]
+        : [rehypeMathjax];
 
   return (
     <ReactMarkdown

diff --git a/src/layouts/DarkLightToggle.tsx b/src/layouts/DarkLightToggle.tsx
@@ -1,29 +1,51 @@
+import { joinClasses } from "@/utils/common";
+import React from "react";
+
 export default function DarkLightToggle() {
+  function isWindowDarkMode(): boolean {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  const [isdark, setIsdark] = React.useState(() => {
+    if (localStorage.getItem("isdark") === "true") return true;
+    if (localStorage.getItem("isdark") === "false") return false;
+    return isWindowDarkMode();
+  });
+
+  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"
-        data-key="theme"
+        value={isWindowDarkMode() ? "light" : "dark"}
+        checked={isWindowDarkMode() ? !isdark : isdark}
+        onChange={() => setIsdark(!isdark)}
       />
-      {/* moon icon */}
+      {/* sun icon */}
       <svg
-        className="swap-off h-6 w-full self-center fill-current"
+        className={joinClasses(
+          "h-6 w-full self-center fill-current",
+          isWindowDarkMode() ? "swap-on" : "swap-off",
+        )}
         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={joinClasses(
+          "swap-off h-6 w-full self-center fill-current",
+          isWindowDarkMode() ? "swap-off" : "swap-on",
+        )}
         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,23 @@ 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>
     </>

diff --git a/src/themes/README.md b/src/themes/README.md