xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): resolve hydration mismatch in ThemeToggle by deferring icon render until mounted

Browse Source
This commit is contained in:
xfy 2026-06-05 17:07:23 +08:00
parent 6d621d9ec4
commit 0a33a843f8
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/theme.rs
View File

@ -127,12 +127,17 @@ pub fn ThemePreload() -> Element {
#[component] #[component]
pub fn ThemeToggle() -> Element { pub fn ThemeToggle() -> Element {
let mut theme = use_theme(); let mut theme = use_theme();
let mut mounted = use_signal(|| false);
use_effect(move || {
mounted.set(true);
});
rsx! { rsx! {
button { button {
class: "theme-toggle p-2 rounded-full cursor-pointer hover:opacity-80 transition-opacity text-gray-600 dark:text-gray-300", class: "theme-toggle p-2 rounded-full cursor-pointer hover:opacity-80 transition-opacity text-gray-600 dark:text-gray-300",
onclick: move |_| theme.set(theme().toggle()), onclick: move |_| theme.set(theme().toggle()),
if theme() == Theme::Dark { if mounted() && theme() == Theme::Dark {
svg { svg {
xmlns: "http://www.w3.org/2000/svg", xmlns: "http://www.w3.org/2000/svg",
height: "24px", height: "24px",