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/app.vue

@@ -2,14 +2,15 @@
 import '~/assets/css/reset.css';
 import '~/assets/css/base.css';
 
-const { accent, neutral, hinting } = useTheme();
+const { accent, neutral, hinting } = await useUserSettings();
 
 // by default, disable hinting
 if (Number.isNaN(Number(hinting.value))) hinting.value = '0';
 
-useHead({
+watchEffect(() => {
-    htmlAttrs: {
+    useHead({
-        style: `
+        htmlAttrs: {
+            style: `
         --neutral-100: var(--palette-${neutral.value}-100);
         --neutral-200: var(--palette-${neutral.value}-200);
         --neutral-300: var(--palette-${neutral.value}-300);
@@ -17,31 +18,13 @@ useHead({
         --color-accent-hover: var(--accent-${accent.value}-hover, var(--accent-violet-hover)); 
         --accent-hinting: ${hinting.value}%; 
         --base-hinting: calc(100% - var(--accent-hinting));`,
-    },
+        },
+    });
 });
 
 if (import.meta.client) {
     // force shiki into browser rendering only
     window.sessionStorage.setItem('mdc-shiki-highlighter', 'browser');
-
-    watchEffect(() => {
-        document.documentElement.style.setProperty(
-            '--color-accent',
-            `var(--accent-${accent.value}, var(--accent-violet))`,
-        );
-        document.documentElement.style.setProperty(
-            '--color-accent-hover',
-            `var(--accent-${accent.value}-hover, var(--accent-violet-hover))`,
-        );
-        // document.documentElement.style.setProperty(
-        //     '--color-neutral',
-        //     `var(--neutral-${neutral.value}, var(--neutral-zinc))`,
-        // );
-        document.documentElement.style.setProperty('--neutral-100', `var(--palette-${neutral.value}-100)`);
-        document.documentElement.style.setProperty('--neutral-200', `var(--palette-${neutral.value}-200)`);
-        document.documentElement.style.setProperty('--neutral-300', `var(--palette-${neutral.value}-300)`);
-        document.documentElement.style.setProperty('--accent-hinting', `${hinting.value}%`);
-    });
 }
 </script>
 

app/assets/css/base.css

@@ -1,7 +1,7 @@
 :root {
     --spacing: 0.25rem;
 
-    --color-accent-text: #232625;
+    --color-accent-text: #fcfdff;
 
     --reasoning-accent: #a62bcb;
 

app/components/ChatInput.vue

@@ -161,7 +161,7 @@ onUnmounted(() => {
 
 <template>
     <div :class="['w-full flex max-h-full', $attrs.class]">
-        <div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-3 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
+        <div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-2 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
         border-[var(--color-border)] focus-within:border-[var(--color-border-active)]">
             <div class="flex-1 min-w-0 max-h-full">
                 <!-- Grammarly literally breaks everything, go fuck yourself -->

app/components/Settings/AppearanceSettings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-const { settings, updateSettings } = await useUserSettings();
+const { colorScheme, settings, updateSettings } = await useUserSettings();
-const { colorScheme } = useTheme();
 
 const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
 const neutrals = ['zinc', 'slate', 'obsidian'];

app/composables/useTheme.ts

@@ -1,76 +0,0 @@
-export const useTheme = () => {
-    const accent = useCookie('accent', {
-        default: () => 'violet',
-        maxAge: 60 * 60 * 24 * 365,
-    });
-    const neutral = useCookie('neutral', {
-        default: () => 'zinc',
-        maxAge: 60 * 60 * 24 * 365,
-    });
-    // disable hinting by default
-    const hinting = useCookie('hinting', {
-        default: () => '0',
-        maxAge: 60 * 60 * 24 * 365,
-    });
-
-    const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
-        preference: useCookie('colorScheme', {
-            default: () => 'system',
-            maxAge: 60 * 60 * 24 * 365,
-        }),
-        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 });
-
-    return {
-        accent,
-        neutral,
-        hinting,
-        colorScheme
-    };
-};

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
     };
 };

app/layouts/default.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import SettingsDialog from '~/components/Settings/Dialog.vue';
 
-const { open: sidebarOpen, openSidebar } = useSidebar();
+const { colorScheme } = await useUserSettings();
-const { colorScheme } = useTheme();
 
 useHead({
     htmlAttrs: {