From e8767a5ca2aed7bdb590c161e2922751e263abe9 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Fri, 31 May 2024 23:53:39 +0800
Subject: [PATCH] feat: switch theme

---
 components/SwitchTheme.vue                    | 36 ++++++++++++++++
 components/layouts/Footer.vue                 |  2 +-
 components/layouts/Header.vue                 | 12 ++++--
 components/ui/dropdown-menu/DropdownMenu.vue  | 14 +++++++
 .../DropdownMenuCheckboxItem.vue              | 40 ++++++++++++++++++
 .../ui/dropdown-menu/DropdownMenuContent.vue  | 38 +++++++++++++++++
 .../ui/dropdown-menu/DropdownMenuGroup.vue    | 11 +++++
 .../ui/dropdown-menu/DropdownMenuItem.vue     | 28 +++++++++++++
 .../ui/dropdown-menu/DropdownMenuLabel.vue    | 24 +++++++++++
 .../dropdown-menu/DropdownMenuRadioGroup.vue  | 19 +++++++++
 .../dropdown-menu/DropdownMenuRadioItem.vue   | 41 +++++++++++++++++++
 .../dropdown-menu/DropdownMenuSeparator.vue   | 22 ++++++++++
 .../ui/dropdown-menu/DropdownMenuShortcut.vue | 14 +++++++
 .../ui/dropdown-menu/DropdownMenuSub.vue      | 19 +++++++++
 .../dropdown-menu/DropdownMenuSubContent.vue  | 30 ++++++++++++++
 .../dropdown-menu/DropdownMenuSubTrigger.vue  | 33 +++++++++++++++
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  | 13 ++++++
 components/ui/dropdown-menu/index.ts          | 16 ++++++++
 nuxt.config.ts                                |  4 ++
 package.json                                  |  3 ++
 pnpm-lock.yaml                                | 39 ++++++++++++++++++
 21 files changed, 453 insertions(+), 5 deletions(-)
 create mode 100644 components/SwitchTheme.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenu.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuContent.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuGroup.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuItem.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuLabel.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuRadioItem.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuSeparator.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuShortcut.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuSub.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuSubContent.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
 create mode 100644 components/ui/dropdown-menu/DropdownMenuTrigger.vue
 create mode 100644 components/ui/dropdown-menu/index.ts

diff --git a/components/SwitchTheme.vue b/components/SwitchTheme.vue
new file mode 100644
index 0000000..5cfadc8
--- /dev/null
+++ b/components/SwitchTheme.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { Icon } from '@iconify/vue'
+import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+
+const colorMode = useColorMode()
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost">
+        <Icon
+          icon="radix-icons:sun"
+          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+        />
+        <Icon
+          icon="radix-icons:moon"
+          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+        />
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem @click="colorMode.preference = 'light'">
+        Light
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="colorMode.preference = 'dark'">
+        Dark
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="colorMode.preference = 'system'">
+        System
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/components/layouts/Footer.vue b/components/layouts/Footer.vue
index 8fa9ff1..064b06e 100644
--- a/components/layouts/Footer.vue
+++ b/components/layouts/Footer.vue
@@ -8,7 +8,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="text-gray-700 bg-white md:pt-6">
+  <section class="md:pt-6">
     <div class="container flex flex-col items-center py-8 mx-auto sm:flex-row">
       <a
         href="/"
diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue
index cc36c7d..f310fbf 100644
--- a/components/layouts/Header.vue
+++ b/components/layouts/Header.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { Ellipsis, X } from 'lucide-vue-next'
 import { GitHubIcon } from 'vue3-simple-icons'
+import SwitchTheme from '../SwitchTheme.vue'
 
 const showMenu = ref(false)
 </script>
 
 <template>
-  <section class="pb-6 bg-white">
+  <section class="pb-6">
     <nav class="container relative z-50 h-24 select-none">
       <div
         class="container relative flex flex-wrap items-center justify-between h-24 px-0 mx-auto overflow-hidden font-medium border-b border-gray-200 md:overflow-visible lg:justify-center"
@@ -17,7 +18,7 @@ const showMenu = ref(false)
             class="flex items-center py-4 space-x-2 text-xl font-extrabold text-gray-900 md:py-0"
           >
             <span
-              class="flex items-center justify-center w-8 h-8 text-white bg-gray-900 rounded-full"
+              class="flex items-center justify-center w-8 h-8 bg-gray-900 rounded-full"
             >
               <img
                 src="/sink.png"
@@ -64,18 +65,21 @@ const showMenu = ref(false)
               <a
                 href="https://github.com/ccbikai/sink"
                 target="_blank"
-                class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
+                class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:mr-2 lg:mr-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
               >
                 <GitHubIcon
                   class="w-5 h-5 mr-1"
                 />
                 GitHub</a>
+              <span class="px-3 py-2">
+                <SwitchTheme />
+              </span>
             </div>
           </div>
         </div>
 
         <div
-          class="absolute right-0 flex flex-col items-center justify-center w-10 h-10 bg-white rounded-full cursor-pointer md:hidden hover:bg-gray-100"
+          class="absolute right-0 flex flex-col items-center justify-center w-10 h-10rounded-full cursor-pointer md:hidden hover:bg-gray-100"
           @click="showMenu = !showMenu"
         >
           <Ellipsis
diff --git a/components/ui/dropdown-menu/DropdownMenu.vue b/components/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..b83d90b
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..e4157e5
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuContent.vue b/components/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..d84a307
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuGroup.vue b/components/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..3f20135
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuItem.vue b/components/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..217bb0e
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuLabel.vue b/components/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..f9b2234
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..4a72790
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..0ff1f30
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..567be41
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..0506b7c
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSub.vue b/components/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..e0f4bd7
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..c8a9b00
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..9d346f0
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/utils'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..8efd5a9
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/components/ui/dropdown-menu/index.ts b/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..6f9446c
--- /dev/null
+++ b/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { DropdownMenuPortal } from 'radix-vue'
+
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 04acce6..9090a93 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,7 +6,11 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
     '@nuxt/eslint',
     '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
   ],
+  colorMode: {
+    classSuffix: '',
+  },
   routeRules: {
     '/': {
       prerender: true,
diff --git a/package.json b/package.json
index c380af7..3cfed91 100644
--- a/package.json
+++ b/package.json
@@ -37,9 +37,12 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.18.1",
+    "@iconify-json/radix-icons": "^1.1.14",
+    "@iconify/vue": "^4.1.2",
     "@nuxt/eslint": "^0.3.13",
     "@nuxt/eslint-config": "^0.3.13",
     "@nuxthub/core": "^0.5.17",
+    "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/tailwindcss": "^6.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 517ac42..cca9b9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,6 +63,12 @@ importers:
       '@antfu/eslint-config':
         specifier: ^2.18.1
         version: 2.18.1(@vue/compiler-sfc@3.4.27)(eslint@8.57.0)(typescript@5.4.5)
+      '@iconify-json/radix-icons':
+        specifier: ^1.1.14
+        version: 1.1.14
+      '@iconify/vue':
+        specifier: ^4.1.2
+        version: 4.1.2(vue@3.4.27(typescript@5.4.5))
       '@nuxt/eslint':
         specifier: ^0.3.13
         version: 0.3.13(eslint@8.57.0)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.0)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.0(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0))(vue-tsc@2.0.19(typescript@5.4.5)))(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0))
@@ -72,6 +78,9 @@ importers:
       '@nuxthub/core':
         specifier: ^0.5.17
         version: 0.5.17(ioredis@5.4.1)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.0)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.0(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0))(vue-tsc@2.0.19(typescript@5.4.5)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0))
+      '@nuxtjs/color-mode':
+        specifier: ^3.4.1
+        version: 3.4.1(rollup@4.17.2)
       '@nuxtjs/tailwindcss':
         specifier: ^6.12.0
         version: 6.12.0(rollup@4.17.2)
@@ -799,12 +808,20 @@ packages:
   '@humanwhocodes/object-schema@2.0.3':
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
 
+  '@iconify-json/radix-icons@1.1.14':
+    resolution: {integrity: sha512-AYBOyhnJ2hXlg3aIn8Ekphrr7zHRyz1l8x6bidM3PDUuTL+aRt8r6cpCvN3GeuTHy2JOhmihbVJRF0bt2FF7Ag==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
   '@iconify/utils@2.1.23':
     resolution: {integrity: sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==}
 
+  '@iconify/vue@4.1.2':
+    resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
+    peerDependencies:
+      vue: '>=3'
+
   '@internationalized/date@3.5.4':
     resolution: {integrity: sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==}
 
@@ -1030,6 +1047,9 @@ packages:
   '@nuxthub/core@0.5.17':
     resolution: {integrity: sha512-vMizOqQUqEZNjn5Z5/9If34j8ssNqA2qekK4U55BnrweJAUgG//BOLJvRx5nzizqt8Yp7yIsz3O7yEwUb0IVCA==}
 
+  '@nuxtjs/color-mode@3.4.1':
+    resolution: {integrity: sha512-vZgJqDstxInGw3RGSWbLoCLXtU1mvh1LLeuEA/X3a++DYA4ifwSbNoiSiOyb9qZHFEwz1Xr99H71sXV4IhOaEg==}
+
   '@nuxtjs/tailwindcss@6.12.0':
     resolution: {integrity: sha512-vXvEq8z177TQcx0tc10mw3O6T9WeN0iTL8hIKGDfidmr+HKReexJU01aPgHefFrCu4LJB70egYFYnywzB9lMyQ==}
 
@@ -6597,6 +6617,10 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@iconify-json/radix-icons@1.1.14':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.23':
@@ -6611,6 +6635,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@iconify/vue@4.1.2(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.27(typescript@5.4.5)
+
   '@internationalized/date@3.5.4':
     dependencies:
       '@swc/helpers': 0.5.11
@@ -7152,6 +7181,16 @@ snapshots:
       - uWebSockets.js
       - vite
 
+  '@nuxtjs/color-mode@3.4.1(rollup@4.17.2)':
+    dependencies:
+      '@nuxt/kit': 3.11.2(rollup@4.17.2)
+      pathe: 1.1.2
+      pkg-types: 1.1.1
+      semver: 7.6.1
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
   '@nuxtjs/tailwindcss@6.12.0(rollup@4.17.2)':
     dependencies:
       '@nuxt/kit': 3.11.2(rollup@4.17.2)