From 35aea8f090e331b8d2e8a20fc59f249695b1f486 Mon Sep 17 00:00:00 2001 From: Reed von Redwitz Date: Fri, 2 Feb 2024 19:55:44 +0100 Subject: [PATCH] fix: flicker on theme when in dark mode --- src/components/Header.tsx | 4 ++-- src/islands/NavigationBar.tsx | 4 ++-- src/islands/ThemeToggle.tsx | 6 ++---- src/routes/_app.tsx | 2 +- 4 files changed, 7 insertions(+), 9 deletions(-) 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) { -
    +