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

Author: holloway

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
 // --------------------------------------------------------------------