feat(web): auto switch theme (#6176)

* move from app.html to user-page-layout.svelte

* fix: use layout.svelte

* simplify

* fix: map style don't change

* fix: auto switch theme map

* use constants

* simplify

* rename

* rename settign

* fix: remove

* pr feedback

* fix: tests

* fix: migration

* fix: migration

* pr feedback

* simplify

* simplify

* pr feedback

* fix: merge

* chore: set insetad of toggle on click

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/app.html

@@ -18,11 +18,37 @@
       /**
        * Prevent FOUC on page load.
        */
-      const theme = localStorage.getItem('color-theme') || 'dark';
-      if (theme === 'light') {
+      const colorThemeKeyName = 'color-theme';
+      let theme;
+      const fallbackTheme = { value: 'dark', system: false };
+      let item = localStorage.getItem(colorThemeKeyName);
+      if (item === 'dark' || item === 'light') {
+        fallbackTheme.value = item;
+        item = JSON.stringify(fallbackTheme);
+        localStorage.setItem(colorThemeKeyName, item);
+      }
+
+      theme = JSON.parse(localStorage.getItem(colorThemeKeyName));
+
+      if (theme) {
+        if (theme.system) {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            theme.value = 'dark';
+          } else {
+            theme.value = 'light';
+          }
+        }
+      } else {
+        theme = fallbackTheme;
+      }
+
+      if (theme.value === 'light') {
         document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
       }
     </script>
+
     <link rel="stylesheet" href="/custom.css" />
   </head>