color cookie

app/assets/css/global.css

@@ -3,6 +3,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+
 :root {
   --font-sans: 'Public Sans', sans-serif;
     --ui-primary: rgb(189, 23, 255);
@@ -21,28 +22,6 @@
 
 }
 
-.ui-red {
-    --ui-primary: var(--color-red-500);
-    --ui-bg-elevated:  oklch(63.7% 0.237 25.331 / 20%);
-    --ui-bg-accented:  oklch(63.7% 0.237 25.331 / 40%);
-}
-
-.ui-blue {
-    --ui-primary: var(--color-blue-500);
-    --ui-bg-elevated: oklch(62.3% 0.214 259.815 / 20%);
-    --ui-bg-accented: oklch(62.3% 0.214 259.815 / 40%);
-}
-
-.ui-violet {
-    --ui-primary: var(--color-violet-500);
-    --ui-bg-elevated: oklch(60.6% 0.25 292.717 / 20%);
-    --ui-bg-accented: oklch(60.6% 0.25 292.717 / 40%);
-}
-
-.ui-orange {
-    --ui-primary: var(--color-orange-600);
-}
-
 .dark-widget-bg {
     --ui-bg-elevated: rgb(34, 24, 32);
     --ui-bg-accented: rgb(22,22,22);

app/assets/css/ui_colors.css

@@ -0,0 +1,33 @@
+
+.ui-red {
+    --ui-primary: var(--color-red-500);
+    --ui-bg-elevated:  oklch(63.7% 0.237 25.331 / 20%);
+    --ui-bg-accented:  oklch(63.7% 0.237 25.331 / 40%);
+}
+
+.ui-blue {
+    --ui-primary: var(--color-blue-500);
+    --ui-bg-elevated: oklch(62.3% 0.214 259.815 / 20%);
+    --ui-bg-accented: oklch(62.3% 0.214 259.815 / 40%);
+}
+
+.ui-violet {
+    --ui-primary: var(--color-violet-500);
+    --ui-bg-elevated: oklch(60.6% 0.25 292.717 / 20%);
+    --ui-bg-accented: oklch(60.6% 0.25 292.717 / 40%);
+}
+
+.ui-indigo {
+    --ui-primary: var(--color-indigo-500);
+    --ui-bg-elevated: oklch(58.5% 0.233 277.117 / 20%);
+    --ui-bg-accented:  oklch(58.5% 0.233 277.117 / 40%);
+}
+
+.ui-orange {
+    --ui-primary: var(--color-orange-600);
+}
+.ui-cyan {
+    --ui-primary: var(--color-cyan-500);
+    --ui-bg-elevated: oklch(71.5% 0.143 215.221 / 20%);
+    --ui-bg-accented: oklch(71.5% 0.143 215.221 / 40%);
+}

app/composables/ui_color.ts

@@ -7,9 +7,12 @@ export function ui_color_cookie(): CookieRef<string> {
 
     });
     watch(c, (newVal, oldVal) => {
-        document.body.classList.remove(oldVal);
-        document.body.classList.add(newVal);
-    })
+        // remove old class (if it's been put)
+        if (oldVal != undefined) document.body.classList.remove("ui-" + oldVal);
+
+        // add new class
+        document.body.classList.add("ui-" + newVal);
+    }, { immediate: true})
 
     return c;
 

app/layouts/dashboard.vue

@@ -41,11 +41,15 @@ const nav : NavigationMenuItem[][] = [[
 ]];*/
 
 // set color
-useHead({
+/*useHead({
   bodyAttrs: {
     class: "ui-blue"
   }
+})*/
+onMounted(() => {
+  ui_color_cookie();
 })
+
 </script>
 <template>
   <UDashboardGroup>

nuxt.config.ts

@@ -4,7 +4,7 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: true},
-    css: ['./app/assets/css/global.css' ],
+    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css' ],
     modules: [
       '@nuxt/image',
       '@nuxt/ui',
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
     ],
     vite: {
         plugins: [
-            tailwindcss()
+            tailwindcss(),
         ],
     },
 })