color mode

app/assets/css/global.css

@@ -5,15 +5,42 @@
 
 :root {
   --font-sans: 'Public Sans', sans-serif;
-  --ui-bg: rgb(220,220,220);
+    --ui-primary: rgb(189, 23, 255);
 }
+
+.light {
+    --ui-bg: var(--color-neutral-100);
+}
+
 .dark {
   /*--ui-bg: var(--ui-color-neutral-950);*/
-  --ui-bg: rgb(17,17,17);
+  --ui-bg: oklch(16.7% 0.004 49.25);
   --ui-bg-accented: rgba(189, 23, 255, 0.3);
   --ui-bg-elevated: rgba(189, 23, 255, 0.2);
 
-  --ui-primary: rgb(189, 23, 255);
+
+}
+
+.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 {

app/components/dashboard/header.vue

@@ -12,7 +12,7 @@ import { literal, string } from 'zod';
 </script>
 
 <template>
-    <UHeader :title="props.title" toggle-side="left">
+    <UHeader :title="props.title" toggle-side="left" :to="undefined">
         <template #toggle>
             <!---<UDashboardSidebarCollapse />-->
             <UDashboardSidebarToggle />

app/components/dashboard/sidebar.vue

@@ -10,7 +10,7 @@ const items_def: NavigationMenuItem[][] = [
   active: true
 }, {
   label: 'Inbox',
-  icon: 'i-lucide-inbox',
+  icon: 'solar:chat-round-unread-outline',
   badge: '4'
 }, {
   label: 'Contacts',

app/layouts/dashboard.vue

@@ -8,19 +8,44 @@ const nav : NavigationMenuItem[][] = [[
   to: "/dashboard"
 }, {
   label: 'Notifications',
-  icon: 'i-lucide-inbox',
+  icon: 'solar:chat-round-unread-outline',
   badge: '4',
   to: "/events"
 }, {
   label: 'Settings',
   icon: 'i-lucide-settings',
-  to: '/settings'
-  }]];
+  //to: '/settings',
+  children: [
+    {
+      label: "General",
+      icon: "solar:settings-minimalistic-broken",
+      to: "/settings",
+    },
+    {
+      label: "Profile",
+      icon: "solar:user-broken",
+      to: "/settings/profile"
+    },
+    {
+      label: "Theme",
+      icon: "solar:pallete-2-broken",
+      to: "/settings/theme"
+    },
+  ],
+  }]
+];
 /*[
   {
     label: "Feedback"
   }
 ]];*/
+
+// set color
+useHead({
+  bodyAttrs: {
+    class: "ui-blue"
+  }
+})
 </script>
 <template>
   <UDashboardGroup>
@@ -28,7 +53,7 @@ const nav : NavigationMenuItem[][] = [[
     
     <UDashboardSidebarCollapse />
 
-    <UContainer class="overflow-auto">
+    <UContainer class="max-w-full overflow-auto">
       <!-- in my case I want the button to be the same everywhere.
       if you wanna customize it per page, place it per page inside UContainer -->
       <!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->

app/pages/dashboard.vue

@@ -123,7 +123,7 @@ import { h } from 'vue'
 
 <template>
   <DashboardHeader title="Dashboard"/>
-
+  <UContainer class="max-w-full">
     <div class="mt-3 mb-3 flex flex-col w-full relative z-0">
       <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
       <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
@@ -144,8 +144,7 @@ import { h } from 'vue'
 
 
     <UTable :data="table_demo" :columns="table_headers" class="flex-1 "/>
-
-
+  </UContainer>
     <UFooter>
       <p>footer</p>
     </UFooter>

app/pages/settings/theme.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "dashboard"
+})
+
+const color_choose = ref(["Cyan","Red","Green","Blue","Purple"])
+
+</script>
+
+<template>
+    <DashboardHeader title="Customization" />
+
+    <UContainer class="mt-4 max-w-full">
+        <UFormField
+          label="Color"
+          orientation="horizontal"
+          description="Select your color theme"
+          class=""
+        >
+          <UColorModeSelect class="" />
+        </UFormField>
+    </UContainer>
+</template>
+

app/pages/settings/ui.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: "dashboard"
-})
-</script>
-
-<template>
-    <DashboardHeader title="Customization" />
-</template>
-
-<style scoped>
-
-</style>