fix: dropdown color

components/common/dropdown/Dropdown.vue

@@ -9,7 +9,7 @@ provide(dropdownContextKey, {
 </script>
 
 <template>
-  <VDropdown v-bind="$attrs" ref="dropdown">
+  <VDropdown v-bind="$attrs" ref="dropdown" :class="{ dark: isDark }">
     <slot />
     <template #popper="scope">
       <slot name="popper" v-bind="scope" />

nuxt.config.ts

@@ -12,8 +12,10 @@ export default defineNuxtConfig({
   },
   css: [
     '@unocss/reset/tailwind.css',
+    'floating-vue/dist/style.css',
     '~/styles/vars.css',
     '~/styles/global.css',
+    '~/styles/dropdown.css',
   ],
   alias: {
     querystring: 'rollup-plugin-node-polyfills/polyfills/qs',

plugins/floating-vue.ts

@@ -1,6 +1,5 @@
 import FloatingVue from 'floating-vue'
 import { defineNuxtPlugin } from '#app'
-import 'floating-vue/dist/style.css'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(FloatingVue)

styles/dropdown.css

@@ -0,0 +1,18 @@
+.v-popper--theme-dropdown .v-popper__inner {
+  --at-apply: bg-base text-base rounded border border-base shadow;
+  box-shadow: 0 6px 30px #0000001a;
+}
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  --at-apply: border-base;
+}
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  --at-apply: border-base;
+}
+.v-popper--theme-tooltip .v-popper__inner {
+  --at-apply: bg-base text-base rounded border border-base shadow;
+  padding: 7px 12px 6px;
+}
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  --at-apply: border-base;
+}