From 86018222b0e0d6f8211123127ef6e08e81eb96a4 Mon Sep 17 00:00:00 2001 From: yyyr Date: Tue, 21 Jul 2026 01:53:17 +0800 Subject: [PATCH] fix(theme-toggle): sync theme across tabs on storage event --- src/components/ThemeToggle.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx index f779e4cc..842cd8d9 100644 --- a/src/components/ThemeToggle.tsx +++ b/src/components/ThemeToggle.tsx @@ -32,12 +32,22 @@ function applyTheme(theme: ThemeMode) { } function subscribeToTheme(onStoreChange: () => void) { + function handleStorage(event: StorageEvent) { + if (event.key !== THEME_STORAGE_KEY) return; + const nextTheme: ThemeMode | null = + event.newValue === "dark" ? "dark" : event.newValue === "light" ? "light" : null; + if (nextTheme === null) return; + if (readCurrentTheme() !== nextTheme) { + applyTheme(nextTheme); + } + onStoreChange(); + } window.addEventListener(THEME_CHANGE_EVENT, onStoreChange); - window.addEventListener("storage", onStoreChange); + window.addEventListener("storage", handleStorage); return () => { window.removeEventListener(THEME_CHANGE_EVENT, onStoreChange); - window.removeEventListener("storage", onStoreChange); + window.removeEventListener("storage", handleStorage); }; }