feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/components/ThemeSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex items-center shadow-sm">
+    <USelectMenu
+      v-model="primary"
+      name="primary"
+      class="w-full [&>div>button]:!rounded-r-none"
+      appearance="gray"
+      :ui="{ width: 'w-[194px]' }"
+      :popper="{ placement: 'bottom-start' }"
+      :options="primaryOptions"
+    >
+      <template #label>
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
+
+        {{ primary.text }}
+      </template>
+
+      <template #option="{ option }">
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+
+        {{ option.text }}
+      </template>
+    </USelectMenu>
+
+    <USelectMenu
+      v-model="gray"
+      name="gray"
+      class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+      appearance="gray"
+      :ui="{ width: 'w-[194px]' }"
+      :popper="{ placement: 'bottom-end' }"
+      :options="grayOptions"
+    >
+      <template #label>
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
+
+        {{ gray.text }}
+      </template>
+
+      <template #option="{ option }">
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+
+        {{ option.text }}
+      </template>
+    </USelectMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import colors from '#tailwind-config/theme/colors'
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const primaryCookie = useCookie('primary', { path: '/', default: () => appConfig.ui.primary })
+const grayCookie = useCookie('gray', { path: '/', default: () => appConfig.ui.gray })
+
+watch(primaryCookie, (primary) => {
+  appConfig.ui.primary = primary
+}, { immediate: true })
+
+watch(grayCookie, (gray) => {
+  appConfig.ui.gray = gray
+}, { immediate: true })
+
+// Computed
+
+const primaryOptions = computed(() => useWithout(appConfig.ui.colors, 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const primary = computed({
+  get () {
+    return primaryOptions.value.find(option => option.value === primaryCookie.value)
+  },
+  set (option) {
+    primaryCookie.value = option.value
+  }
+})
+
+const grayOptions = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const gray = computed({
+  get () {
+    return grayOptions.value.find(option => option.value === grayCookie.value)
+  },
+  set (option) {
+    grayCookie.value = option.value
+  }
+})
+</script>