fix combobox dark mode ui

lyqht · Feb 16, 2024 · 0db4595 · 0db4595
1 parent d178ecc
commit 0db4595
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -294,8 +294,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <main :class="{ dark: isDark }">
-    <div class="relative grid place-items-center bg-white p-8 dark:bg-zinc-900 md:px-6">
+  <main>
+    <div class="relative grid place-items-center bg-white p-8 md:px-6 dark:bg-zinc-900">
       <div
         class="mb-8 flex w-full flex-row flex-wrap justify-between gap-4 md:mb-4 md:w-5/6 md:ps-4"
       >

diff --git a/src/components/ui/Combobox/Combobox.vue b/src/components/ui/Combobox/Combobox.vue
@@ -24,27 +24,40 @@ defineProps<{
 <template>
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
-      <Button variant="outline" role="combobox" :aria-expanded="open"
-        class="w-fit justify-between focus-visible:ring-1 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100">
+      <Button
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        class="w-fit justify-between focus-visible:ring-1 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-900 dark:hover:text-zinc-100"
+      >
         {{ value ? items.find((item) => item.value === value)?.label : 'Select item...' }}
         <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-fit p-0">
-      <Command>
+      <Command class="bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100">
         <CommandInput class="h-9" placeholder="Search item..." />
         <CommandEmpty>No item found.</CommandEmpty>
         <CommandList>
           <CommandGroup>
-            <CommandItem v-for="item in items" :key="item.value" :value="item.value" @select="(ev) => {
-                if (typeof ev.detail.value === 'string') {
-                  value = ev.detail.value
+            <CommandItem
+              v-for="item in items"
+              :key="item.value"
+              :value="item.value"
+              class="bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100"
+              @select="
+                (ev) => {
+                  if (typeof ev.detail.value === 'string') {
+                    value = ev.detail.value
+                  }
+                  open = false
                 }
-                open = false
-              }
-              ">
+              "
+            >
               {{ item.label }}
-              <Check :class="cn('ml-auto h-4 w-4', value === item.value ? 'opacity-100' : 'opacity-0')" />
+              <Check
+                :class="cn('ml-auto h-4 w-4', value === item.value ? 'opacity-100' : 'opacity-0')"
+              />
             </CommandItem>
           </CommandGroup>
         </CommandList>

diff --git a/src/components/ui/command/CommandItem.vue b/src/components/ui/command/CommandItem.vue
@@ -19,7 +19,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxItem
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent dark:data-[highlighted]:bg-zinc-800 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
   >
     <slot />
   </ComboboxItem>

diff --git a/src/index.css b/src/index.css
@@ -36,7 +36,7 @@
     --radius: 0.5rem;
   }
 
-  .dark {
+  :root[class~="dark"]{
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,6 @@
 import animate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
-export const darkMode = ['class']
-export const safelist = ['dark']
 export const content = [
   './pages/**/*.{ts,tsx,vue}',
   './components/**/*.{ts,tsx,vue}',