new font

app/assets/css/global.css

@@ -5,19 +5,19 @@
 
 
 :root {
-  --font-sans: 'Public Sans', sans-serif;
+    --font-sans: 'Space Grotesk', sans-serif;
-    --ui-primary: rgb(189, 23, 255);
+  /*--font-sans: 'Public Sans', sans-serif; */
 }
 
 .light {
     --ui-bg: var(--color-neutral-100);
+    --ui-primary: var(--color-neutral-100);
 }
 
 .dark {
   /*--ui-bg: var(--ui-color-neutral-950);*/
   --ui-bg: oklch(16.7% 0.004 49.25);
-  --ui-bg-accented: rgba(189, 23, 255, 0.3);
+    --ui-primary: var(--color-neutral-900);
-  --ui-bg-elevated: rgba(189, 23, 255, 0.2);
 
 
 }

app/assets/css/ui_colors.css

@@ -6,11 +6,15 @@
 }
 
 .ui-blue {
-    --ui-primary: var(--color-blue-500);
+    --ui-primary: var(--color-blue-600);
-    --ui-bg-elevated: oklch(62.3% 0.214 259.815 / 20%);
+    --ui-bg-elevated: oklch(54.6% 0.245 262.881 / 20%);
-    --ui-bg-accented: oklch(62.3% 0.214 259.815 / 40%);
+    --ui-bg-accented: oklch(54.6% 0.245 262.881 / 40%);
+}
+.ui-green {
+    --ui-primary: var(--color-green-500);
+    --ui-bg-elevated: oklch(72.3% 0.219 149.579 / 20%);
+    --ui-bg-accented: oklch(72.3% 0.219 149.579 / 40%);
 }
-
 .ui-violet {
     --ui-primary: var(--color-violet-500);
     --ui-bg-elevated: oklch(60.6% 0.25 292.717 / 20%);

app/assets/css/ui_fonts.css

@@ -0,0 +1,12 @@
+.font-pubsans {
+    --font-sans: "Public Sans", sans-serif;
+}
+.font-geist {
+    --font-sans: "Geist One", sans-serif;
+}
+.font-nunito {
+    --font-sans: "Nunito", sans-serif;
+}
+.font-grot {
+    --font-sans: "Space Grotesk", sans-serif;
+}

app/composables/ui_color.ts

@@ -1,19 +0,0 @@
-import type {CookieRef} from "#app";
-
-export function ui_color_cookie(): CookieRef<string> {
-
-    const c = useCookie("ui_color",{
-        default: () => "green",
-
-    });
-    watch(c, (newVal, oldVal) => {
-        // 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/composables/ui_cookies.ts

@@ -0,0 +1,22 @@
+import type {CookieRef} from "#app";
+
+function ui_cookie(name:string, def:string,prefix:string): CookieRef<string> {
+
+    const c = useCookie(name,{
+        default: () => def,
+
+    });
+    watch(c, (newVal, oldVal) => {
+        // remove old class (if it's been put)
+        if (oldVal != undefined) document.body.classList.remove(prefix + oldVal.toLowerCase());
+
+        // add new class
+        document.body.classList.add(prefix + newVal.toLowerCase());
+    }, { immediate: true})
+
+    return c;
+
+}
+
+export function ui_color_cookie() { return ui_cookie("ui_color","green","ui-"); }
+export function ui_font_cookie() { return ui_cookie("ui_font","pubsans","font-"); }

app/layouts/default.vue

@@ -5,9 +5,9 @@
 <template>
   <!-- the whole content must be in a UContainer -->
   <!-- overflow auto allows scroll -->
-  <UContainer class="overflow-auto">
+  <!--<UContainer class="overflow-auto">-->
     <slot />
-  </UContainer>
+  <!--</UContainer>-->
 </template>
 
 <style scoped>

app/pages/settings/theme.vue

@@ -1,24 +1,58 @@
 <script setup lang="ts">
+import type {CookieRef} from "#app";
+
 definePageMeta({
-  layout: "dashboard"
+    layout: "dashboard"
+})
+
+const colors_list = ref(["Cyan","Red","Green","Blue","Purple"])
+const color = ref("...");
+
+const fonts_list = ref(["Public Sans","Space Grotesk", "Geist"])
+const font = ref("...");
+
+onMounted(() => {
+  color.value = ui_color_cookie().value
+})
+
+watch(color, (newVal, oldVal) => {
+  ui_color_cookie().value = newVal;
 })
 
-const color_choose = ref(["Cyan","Red","Green","Blue","Purple"])
 
 </script>
 
 <template>
     <DashboardHeader title="Customization" />
 
-    <UContainer class="mt-4 max-w-full">
+    <UContainer class="mt-4 max-w-full justify-center">
         <UFormField
-          label="Color"
+            label="Main Color"
-          orientation="horizontal"
+            orientation="horizontal"
-          description="Select your color theme"
+            description="Select the main color of the UI"
-          class=""
+            size="lg"
+            class="flex justify-between w-full mt-3 mb-3"
         >
-          <UColorModeSelect class="" />
+          <USelect v-model="color" :items="colors_list" />
         </UFormField>
+        <UFormField
+          label="Mode"
+          orientation="horizontal"
+          description="Select if you want Light or Dark mode"
+          size="lg"
+          class="flex justify-between w-full mt-3 mb-3"
+        >
+          <UColorModeSelect />
+        </UFormField>
+        <UFormField
+          label="Font"
+          orientation="horizontal"
+          description="Select which font you want"
+          size="lg"
+          class="flex justify-between w-full mt-3 mb-3"
+      >
+        <USelect v-model="font" :items="fonts_list" />
+      </UFormField>
     </UContainer>
 </template>
 

nuxt.config.ts

@@ -1,10 +1,11 @@
 import tailwindcss from "@tailwindcss/vite";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
+// @ts-ignore
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: true},
-    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css' ],
+    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css', /*'@/assets/css/ui_fonts.css' */],
     modules: [
       '@nuxt/image',
       '@nuxt/ui',