fix(theme): fix theme button

Signed-off-by: loongtao.zhang <loongtao.zhang@outlook.com>
cathaysia · Dec 8, 2024 · f552f9e · f552f9e
1 parent 3a4b58b
commit f552f9e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/theme/layouts/page.html b/theme/layouts/page.html
@@ -9,7 +9,7 @@
 </head>
 
 <body class="article antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900 font-serif">
-    <script type="module" src="@/main.jsx"></script>
+    <script type="module" src="../src/main.jsx"></script>
     <nav class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-none bg-gray-50 dark:bg-gray-800 dark:border-gray-700 fixed w-full z-50 justify-between"
         aria-label="Breadcrumb">
         <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
@@ -84,7 +84,7 @@ <h1 class="mt-16">{{ title }}</h1>
     </div>
     </div>
     {% endif %}
-    <script type="module" src="@/tail.jsx"></script>
+    <script type="module" src="../src/tail.jsx"></script>
 </body>
 
 </html>
diff --git a/theme/pnpm-lock.yaml b/theme/pnpm-lock.yaml
diff --git a/theme/src/tail.jsx b/theme/src/tail.jsx
@@ -1,7 +1,7 @@
 import hljs from "highlight.js";
 
 import { Moon, Sun } from "lucide-react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import reactDom from "react-dom/client";
 
 if (!hljs.initHighlighting.called) {
@@ -22,6 +22,7 @@ function ThemeButton() {
 		"dark",
 		localStorage.theme === "dark",
 	);
+	const [isDark, setIsdark] = useState(localStorage.them === "dark");
 
 	return (
 		<div
@@ -32,9 +33,10 @@ function ThemeButton() {
 					"dark",
 					localStorage.theme === "dark",
 				);
+				setIsdark(localStorage.theme === "dark");
 			}}
 		>
-			{localStorage.theme === "dark" ? (
+			{isDark ? (
 				<Moon className="h-[1.2rem] w-[1.2rem]" />
 			) : (
 				<Sun className="h-[1.2rem] w-[1.2rem]" />