diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 623dc97..cdb6f18 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,7 +2,7 @@ import { BlogOptions } from "../plugin/blog.ts";
import NavigationBar from "../islands/NavigationBar.tsx";
export default function Header(
- props: { options: BlogOptions },
+ props: { options: BlogOptions; theme: string },
) {
return (
@@ -11,7 +11,7 @@ export default function Header(
{props.options.title}
-
+
);
}
diff --git a/src/islands/NavigationBar.tsx b/src/islands/NavigationBar.tsx
index 652fa21..887e946 100644
--- a/src/islands/NavigationBar.tsx
+++ b/src/islands/NavigationBar.tsx
@@ -3,7 +3,7 @@ import { useSignal } from "@preact/signals";
import ThemeToggle from "./ThemeToggle.tsx";
export default function NavigationBar(
- props: { class?: string; options: BlogOptions },
+ props: { class?: string; options: BlogOptions; theme: string },
) {
const isOpen = useSignal(false);
return (
@@ -58,7 +58,7 @@ export default function NavigationBar(
))}
-
+
diff --git a/src/islands/ThemeToggle.tsx b/src/islands/ThemeToggle.tsx
index 72613e6..e566eba 100644
--- a/src/islands/ThemeToggle.tsx
+++ b/src/islands/ThemeToggle.tsx
@@ -32,9 +32,8 @@ const moon = (
);
-export default function ThemeToggle() {
- const currentTheme = localStorage.getItem("theme") ?? "light";
- const isDarkMode = useSignal(currentTheme === "dark");
+export default function ThemeToggle(props: { theme: string }) {
+ const isDarkMode = useSignal(props.theme === "dark");
const toggleTheme = () => {
isDarkMode.value = !isDarkMode.value;
@@ -50,7 +49,6 @@ export default function ThemeToggle() {
}
document.cookie = `theme=${theme};path=/;max-age=31536000;SameSite=Lax`;
- localStorage.setItem("theme", theme);
};
return (
diff --git a/src/routes/_app.tsx b/src/routes/_app.tsx
index a8e2955..b1c1cb8 100644
--- a/src/routes/_app.tsx
+++ b/src/routes/_app.tsx
@@ -16,7 +16,7 @@ export function AppBuilder(options: BlogOptions) {
-
+