website/components/header/ThemePicker.vue

<script setup lang="ts">
import { useColorStore } from '~/store/color'
import { ColorsTheme } from '~~/types'

const colors = Object.values(ColorsTheme)

const { getColor, setColor } = useColorStore()

const colorMode = useColorMode()
const isDark = ref(colorMode.value === 'dark')
watch(isDark, () => {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
})
</script>

<template>
  <UPopover
    mode="hover"
    :ui="{
      background: 'bg-white dark:bg-stone-900',
      ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
      container: 'z-30'
    }"
  >
    <template #default="{ open }">
      <UButton
        color="gray"
        variant="ghost"
        square
        size="lg"
        :class="[open && 'bg-gray-50 dark:bg-gray-800']"
        aria-label="Color picker"
      >
        <UIcon
          class="w-5 h-5 text-primary-500 dark:text-primary-400"
          name="i-ph-paint-brush-bold"
        />
      </UButton>
    </template>

    <template #panel>
      <div class="p-2">
        <div class="grid grid-cols-5 gap-px">
          <UTooltip
            v-for="color in colors"
            :key="color"
            :open-delay="500"
            :text="color"
            class="capitalize"
          >
            <UButton
              color="gray"
              square
              :ui="{
                color: {
                  white: {
                    solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
                    ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
                  }
                }
              }"
              :variant="color === getColor ? 'solid' : 'ghost'"
              @click.stop.prevent="setColor(color)"
            >
              <span
                :class="`bg-${color}-500/80 border-${color}-500`"
                class="flex items-center justify-center w-3 h-3 rounded-full border text-white"
              >
                <UIcon
                  v-if="color === getColor"
                  name="i-ic-round-check"
                />
              </span>
            </UButton>
          </UTooltip>
        </div>
        <UDivider class="my-2" />
        <div>
          <UToggle
            v-model="isDark"
            on-icon="i-heroicons-moon-20-solid"
            off-icon="i-heroicons-sun-20-solid"
          />
        </div>
      </div>
    </template>
  </UPopover>
</template>