bk-vue/src/components/TagCard.vue

<script setup lang="ts">

import type { Tag } from '@/models'
import { lightenHexColor } from '@/utils'
import { computed } from 'vue'

const props = defineProps<{
  target: Tag,
  onClick?: () => void
}>();

const color = computed(() => {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return lightenHexColor(props.target.color);
  }
  return props.target.color;
})



</script>

<template>
  <div
    class="tag"
    @click="props.onClick?.call(undefined)"
  >
    {{ props.target.name }}
  </div>
</template>

<style scoped>

.tag {
  color: v-bind(color);
  border: 1px solid;
  border-radius: 50px;
  padding: 0 16px;
  display: inline-block;
  margin: 3px 6px 3px 0;
  cursor: pointer;
  transition: all .2s;
}

.tag:hover {
  text-shadow: v-bind(color) 0 0 8px;
  box-shadow: v-bind(color) 0 0 8px;
}

</style>