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/lib/stores/preferences.store.ts

@@ -1,13 +1,42 @@
 import { browser } from '$app/environment';
+import { Theme } from '$lib/constants';
 import { persisted } from 'svelte-local-storage-store';
+import { get } from 'svelte/store';
 
-const initialTheme = browser && !window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
+export interface ThemeSetting {
+  value: Theme;
+  system: boolean;
+}
+
+export const handleToggleTheme = () => {
+  const theme = get(colorTheme);
+  theme.value = theme.value === Theme.DARK ? Theme.LIGHT : Theme.DARK;
+  colorTheme.set(theme);
+};
+
+const initTheme = (): ThemeSetting => {
+  if (browser) {
+    if (!window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return { value: Theme.LIGHT, system: false };
+    }
+  }
+  return { value: Theme.DARK, system: false };
+};
+
+const initialTheme = initTheme();
 
 // The 'color-theme' key is also used by app.html to prevent FOUC on page load.
-export const colorTheme = persisted<'dark' | 'light'>('color-theme', initialTheme, {
+export const colorTheme = persisted<ThemeSetting>('color-theme', initialTheme, {
   serializer: {
-    parse: (text) => (text === 'light' ? text : 'dark'),
-    stringify: (obj) => obj,
+    parse: (text: string): ThemeSetting => {
+      const parsedText: ThemeSetting = JSON.parse(text);
+      if (Object.values(Theme).includes(parsedText.value)) {
+        return parsedText;
+      } else {
+        return initTheme();
+      }
+    },
+    stringify: (obj) => JSON.stringify(obj),
   },
 });