feat: change theme dynamically when system preferences change (#7956)

ietf-tools · Sep 24, 2024 · 5ea4cc1 · 5ea4cc1
1 parent 5581dc7
commit 5ea4cc1
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/client/App.vue b/client/App.vue
@@ -30,17 +30,24 @@ const appContainer = ref(null)
 // Set user theme
 // --------------------------------------------------------------------
 
-const desiredTheme = window.localStorage?.getItem('theme')
-if (desiredTheme === 'dark') {
-  siteStore.theme = 'dark'
-} else if (desiredTheme === 'light') {
-  siteStore.theme = 'light'
-} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-  siteStore.theme = 'dark'
-} else {
-  siteStore.theme = 'light'
+function updateTheme() {
+  const desiredTheme = window.localStorage?.getItem('theme')
+  if (desiredTheme === 'dark') {
+    siteStore.theme = 'dark'
+  } else if (desiredTheme === 'light') {
+    siteStore.theme = 'light'
+  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    siteStore.theme = 'dark'
+  } else {
+    siteStore.theme = 'light'
+  }
 }
 
+updateTheme()
+
+// this change event fires for either light or dark changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+
 // --------------------------------------------------------------------
 // Handle browser resize
 // --------------------------------------------------------------------