fixed theme to change only if different from current and to watch pre…

…ferred color scheme changes

src/js/theme.js

@@ -1,29 +1,39 @@
+const prefersLightTheme = window.matchMedia("(prefers-color-scheme: light)")
 const localStorageKey = "novcmbro_decoder_theme"
 const rootElement = document.documentElement
 
 const theme = {
+  preferred: undefined,
   db: () => localStorage.getItem(localStorageKey),
   update: undefined,
   init: undefined,
   change: undefined
 }
 
-theme.update = () => rootElement.classList = theme.db()
+theme.preferred = () => prefersLightTheme.matches ? "light" : "dark"
 
-theme.init = () => {
-  const prefersLightTheme = window.matchMedia("(prefers-color-scheme: light)").matches
+theme.update = () => rootElement.className = theme.db()
 
+theme.init = () => {
   if (!theme.db()) {
-    localStorage.setItem(localStorageKey, prefersLightTheme ? "light" : "dark")
+    localStorage.setItem(localStorageKey, theme.preferred())
   }
 
+  prefersLightTheme.addEventListener("change", () => {
+    localStorage.setItem(localStorageKey, theme.preferred())
+    theme.update()
+  })
+
   theme.update()
 }
 
 theme.change = ({ currentTarget }) => {
   const themeName = currentTarget.classList[1]
-  localStorage.setItem(localStorageKey, themeName)
-  theme.update()
+
+  if (rootElement.className !== themeName) {
+    localStorage.setItem(localStorageKey, themeName)
+    theme.update()
+  }
 }
 
 const { init, change } = theme