docs(header): add color picker

docs/app/components/Header.vue

@@ -32,7 +32,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
     <!-- <UNavigationMenu :items="items" variant="link" /> -->
 
     <template #right>
-      <!-- <ColorPicker /> -->
+      <ColorPicker />
 
       <UTooltip text="Search" :kbds="['meta', 'K']">
         <UContentSearchButton />

docs/app/components/color-picker/ColorPicker.vue

@@ -0,0 +1,62 @@
+<template>
+  <UPopover mode="hover" :ui="{ content: 'p-2' }">
+    <template #default="{ open }">
+      <UButton
+        icon="i-heroicons-swatch-20-solid"
+        color="gray"
+        :variant="open ? 'soft' : 'ghost'"
+        square
+        aria-label="Color picker"
+        :ui="{ leadingIcon: 'text-primary-500 dark:text-primary-400' }"
+      />
+    </template>
+
+    <template #content>
+      <fieldset class="grid grid-cols-5 gap-px">
+        <legend class="text-[11px] font-bold mb-1">
+          Primary
+        </legend>
+
+        <ColorPickerPill v-for="color in primaryColors" :key="color" :color="color" :selected="primary" @select="primary = color" />
+      </fieldset>
+
+      <hr class="border-gray-200 dark:border-gray-800 my-2">
+
+      <fieldset class="grid grid-cols-5 gap-px">
+        <legend class="text-[11px] font-bold mb-1">
+          Gray
+        </legend>
+
+        <ColorPickerPill v-for="color in grayColors" :key="color" :color="color" :selected="gray" @select="gray = color" />
+      </fieldset>
+    </template>
+  </UPopover>
+</template>
+
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+// Computed
+
+const primaryColors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+const primary = computed({
+  get() {
+    return appConfig.ui.colors.primary
+  },
+  set(option) {
+    appConfig.ui.colors.primary = option
+    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.colors.primary)
+  }
+})
+
+const grayColors = ['slate', 'cool', 'zinc', 'neutral', 'stone']
+const gray = computed({
+  get() {
+    return appConfig.ui.colors.gray
+  },
+  set(option) {
+    appConfig.ui.colors.gray = option
+    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.colors.gray)
+  }
+})
+</script>

docs/app/components/color-picker/ColorPickerPill.vue

@@ -0,0 +1,24 @@
+<template>
+  <UTooltip :text="color" class="capitalize" :portal="false">
+    <UButton
+      color="gray"
+      square
+      :variant="color === selected ? 'soft' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span
+        class="inline-block w-3 h-3 rounded-full"
+        :class="`bg-[--color-light] dark:bg-[--color-dark]`"
+        :style="{
+          '--color-light': `var(--color-${color}-500)`,
+          '--color-dark': `var(--color-${color}-400)`
+        }"
+      />
+    </UButton>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+defineProps<{ color: string, selected: string }>()
+defineEmits(['select'])
+</script>

docs/app/plugins/colors.ts

@@ -0,0 +1,38 @@
+export default defineNuxtPlugin({
+  enforce: 'post',
+  setup() {
+    const appConfig = useAppConfig()
+
+    if (import.meta.client) {
+      if (window.localStorage.getItem('nuxt-ui-primary')) {
+        appConfig.ui.colors.primary = window.localStorage.getItem('nuxt-ui-primary')
+      }
+      if (window.localStorage.getItem('nuxt-ui-gray')) {
+        appConfig.ui.colors.gray = window.localStorage.getItem('nuxt-ui-gray')
+      }
+    }
+
+    if (import.meta.server) {
+      useHead({
+        script: [
+          {
+            innerHTML: `
+            let html = document.querySelector('style#nuxt-ui-colors').innerHTML;
+
+            if (localStorage.getItem('nuxt-ui-primary')) {
+              html = html.replaceAll('${appConfig.ui.colors.primary}', localStorage.getItem('nuxt-ui-primary'))
+            }
+            if (localStorage.getItem('nuxt-ui-gray')) {
+              html = html.replaceAll('${appConfig.ui.colors.gray}', localStorage.getItem('nuxt-ui-gray'))
+            }
+
+            document.querySelector('style#nuxt-ui-colors').innerHTML = html
+            `.replace(/\s+/g, ' '),
+            type: 'text/javascript',
+            tagPriority: -1
+          }
+        ]
+      })
+    }
+  }
+})