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({
-    htmlAttrs: {
-        style: `
+watchEffect(() => {
+    useHead({
+        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>