From cd0103a255c45790ea37cbca625cada2eb4fdaf5 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Mon, 10 Jul 2023 20:49:25 +0900
Subject: [PATCH] feat: close #22

---
 apps/blog/src/theme.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/blog/src/theme.ts b/apps/blog/src/theme.ts
index 3e29c10..af6d961 100644
--- a/apps/blog/src/theme.ts
+++ b/apps/blog/src/theme.ts
@@ -22,13 +22,20 @@ function getStoredThemeSetting(): Theme {
         !storedTheme ||
         (storedTheme != Theme.Dark && storedTheme != Theme.Light)
     ) {
-        localStorage.setItem(themeKey, Theme.Dark)
+        setTheme(Theme.Dark)
         return Theme.Dark
     }
 
     return storedTheme
 }
 
+/**
+ * Sets theme setting without applying them
+ */
+function setTheme(targetTheme: Theme) {
+    localStorage.setItem(themeKey, targetTheme)
+}
+
 /**
  * Applies tailwind theme using classes based on current theme setting
  */
@@ -43,10 +50,15 @@ function applyTheme() {
 export const useTheme = create<ThemeState>()((set) => {
     applyTheme()
 
+    addEventListener("storage", () => {
+        setTheme(getStoredThemeSetting())
+        applyTheme()
+    })
+
     return {
         theme: getStoredThemeSetting(),
         setTheme: (themeSetting: Theme) => {
-            localStorage.setItem(themeKey, themeSetting)
+            setTheme(themeSetting)
             applyTheme()
             set((state) => ({
                 ...state,