reafctor: Rely only on the database for themes

This commit makes it so that a user's theme will only be pulled from the
database rather than from a weird mix of cookies and the database. This
fixes some issues with themes rendering weirdly.

app/composables/useUserSettings.ts

@@ -7,7 +7,61 @@ import { computed, watch } from 'vue';
 export const useUserSettings = async () => {
     const { user, loggedIn } = useAuth();
     const triplit = useTriplitClient();
-    const { accent, neutral, hinting, colorScheme } = useTheme();
+
+    const accent = useState('theme:accent', () => 'violet');
+    const neutral = useState('theme:neutral', () => 'zinc');
+    const hinting = useState('theme:hinting', () => '0');
+
+    const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
+        preference: useState('theme:colorScheme', () => 'system' as 'light' | 'dark' | 'system'),
+        value: computed(() => {
+            if (colorScheme.preference.value === 'system') {
+                if (import.meta.client) {
+                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                    return prefersDark ? 'dark' : 'light';
+                }
+
+                return 'dark';
+            }
+
+            return colorScheme.preference.value as 'light' | 'dark';
+        }),
+        class: ref<undefined | 'light' | 'dark'>(undefined)
+    }
+
+    let listeningToColorScheme = false;
+    const changeSystemColorScheme = (e: MediaQueryListEvent) => {
+        if (colorScheme.preference.value !== 'system') return;
+
+        colorScheme.class.value = e.matches ? 'dark' : 'light';
+    }
+    watch(colorScheme.preference, () => {
+        if (colorScheme.preference.value === 'system') {
+            if (import.meta.client) {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                if (!listeningToColorScheme) {
+                    listeningToColorScheme = true;
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeSystemColorScheme);
+                }
+
+                colorScheme.class.value = prefersDark ? 'dark' : 'light';
+                return;
+            }
+
+            if (listeningToColorScheme) {
+                listeningToColorScheme = false;
+                window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeSystemColorScheme);
+            }
+
+            // fallback to dark on the server
+            colorScheme.class.value = 'dark';
+            return;
+        }
+
+        colorScheme.class.value = colorScheme.preference.value as 'light' | 'dark';
+    }, { immediate: true });
 
     const start = Date.now();
     const remoteSettings = useState<Entity<typeof schema, 'settings'> | null>('user:settings', () => null);
@@ -23,28 +77,26 @@ export const useUserSettings = async () => {
         remoteSettings.value = val[0] as any;
     }, { immediate: true, deep: true })
 
-    // Sync remote settings to local cookies
-    // This bridges the gap between the server state and the local CSS variable application
     watch(remoteSettings, (newSettings) => {
         if (!newSettings?.appearance) return;
         const { appearance } = newSettings;
 
-        if (appearance.colorScheme && appearance.colorScheme !== colorScheme.preference.value) {
+        if (appearance.colorScheme) {
             colorScheme.preference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
         }
 
-        if (appearance.accent && appearance.accent !== accent.value) {
+        if (appearance.accent) {
             accent.value = appearance.accent;
         }
 
-        if (appearance.neutral && appearance.neutral !== neutral.value) {
+        if (appearance.neutral) {
             neutral.value = appearance.neutral;
         }
 
-        if (appearance.hinting !== undefined && String(appearance.hinting) !== hinting.value) {
+        if (appearance.hinting !== undefined) {
             hinting.value = String(appearance.hinting);
         }
-    }, { deep: true });
+    }, { immediate: true, deep: true });
 
     // Effective settings with defaults for backwards compatibility
     const settings = computed(() => {
@@ -138,5 +190,9 @@ export const useUserSettings = async () => {
         settings,
         remoteSettings,
         updateSettings,
+        accent,
+        neutral,
+        hinting,
+        colorScheme
     };
 };