new font

app/pages/settings/theme.vue

@@ -1,23 +1,57 @@
 <script setup lang="ts">
+import type {CookieRef} from "#app";
+
 definePageMeta({
     layout: "dashboard"
 })
 
-const color_choose = ref(["Cyan","Red","Green","Blue","Purple"])
+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;
+})
+
 
 </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"
-          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>