feat(UserMenu): add colors

Author: benjamincanac

src/assets/css/main.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
 @theme static {

src/components/UserMenu.vue

@@ -8,6 +8,10 @@ defineProps<{
 }>()
 
 const colorMode = useColorMode()
+const appConfig = useAppConfig()
+
+const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']
 
 const user = ref({
   name: 'Benjamin Canac',
@@ -32,6 +36,50 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
   icon: 'i-lucide-settings',
   to: '/settings'
 }], [{
+  label: 'Theme',
+  icon: 'i-lucide-palette',
+  children: [{
+    label: 'Primary',
+    slot: 'chip',
+    chip: appConfig.ui.colors.primary,
+    content: {
+      align: 'center',
+      collisionPadding: 16
+    },
+    children: colors.map(color => ({
+      label: color,
+      chip: color,
+      slot: 'chip',
+      checked: appConfig.ui.colors.primary === color,
+      type: 'checkbox',
+      onSelect: (e) => {
+        e.preventDefault()
+
+        appConfig.ui.colors.primary = color
+      }
+    }))
+  }, {
+    label: 'Neutral',
+    slot: 'chip',
+    chip: appConfig.ui.colors.neutral === 'neutral' ? 'old-neutral' : appConfig.ui.colors.neutral,
+    content: {
+      align: 'end',
+      collisionPadding: 16
+    },
+    children: neutrals.map(color => ({
+      label: color,
+      chip: color === 'neutral' ? 'old-neutral' : color,
+      slot: 'chip',
+      type: 'checkbox',
+      checked: appConfig.ui.colors.neutral === color,
+      onSelect: (e) => {
+        e.preventDefault()
+
+        appConfig.ui.colors.neutral = color
+      }
+    }))
+  }]
+}, {
   label: 'Appearance',
   icon: 'i-lucide-sun-moon',
   children: [{
@@ -100,5 +148,15 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
         trailingIcon: 'text-dimmed'
       }"
     />
+
+    <template #chip-leading="{ item }">
+      <span
+        :style="{
+          '--chip-light': `var(--color-${(item as any).chip}-500)`,
+          '--chip-dark': `var(--color-${(item as any).chip}-400)`
+        }"
+        class="ms-0.5 size-2 rounded-full bg-(--chip-light) dark:bg-(--chip-dark)"
+      />
+    </template>
   </UDropdownMenu>
 </template>