FranklinWH-Toolbox/src/views/sign-in/component/ThemeColorPopover.vue

<script setup lang="ts">
import { NPopover } from 'naive-ui'

import { ButtonAnimation } from '@/components'
import { usePersonalization } from '@/composable/usePersonalization'
import themeColors from '@/utils/themeColor'

const { color: currentColor, setColor } = usePersonalization()

const colorSwatches = [
  themeColors.red[500],
  themeColors.orange[500],
  themeColors.amber[500],
  themeColors.yellow[500],
  themeColors.lime[500],
  themeColors.green[500],
  themeColors.emerald[500],
  themeColors.teal[500],
  themeColors.cyan[500],
  themeColors.sky[500],
  themeColors.blue[500],
  themeColors.indigo[500],
  themeColors.violet[500],
  themeColors.purple[500],
  themeColors.fuchsia[500],
  themeColors.pink[500],
]
</script>
<template>
  <NPopover
    trigger="click"
    placement="bottom"
    :to="false"
  >
    <template #trigger>
      <ButtonAnimation>
        <template #default>
          <span class="size-5 i-ph:palette" />
        </template>
      </ButtonAnimation>
    </template>
    <div class="grid grid-cols-6 gap-1.5">
      <div
        v-for="color in colorSwatches"
        :key="color"
        class="size-5 cursor-pointer rounded-full"
        :class="{
          'ring-3 ring-primary/30': color === currentColor,
        }"
        :style="{ backgroundColor: color }"
        @click="setColor(color)"
      />
    </div>
  </NPopover>
</template>