feat(ui): 💄 Add dark night mode to select page

Author: orangeawa

components/p/form/Select.vue

@@ -24,7 +24,7 @@ const optionsLeft = computed(() => rootPos.left.value)
 <template>
   <div ref="rootEl" class="inline-block">
     <HListbox v-slot="{ open }" v-model="selectedOp">
-      <HListboxButton class="w-full px-2 py-0.5 rounded-md flex justify-between items-center space-x-4 bg-white whitespace-nowrap" :class="{ 'ring ring-purple-100': ring }">
+      <HListboxButton class="w-full px-2 py-0.5 rounded-md flex justify-between items-center space-x-4 bg-white whitespace-nowrap dark:bg-gray-600 dark:text-gray-200" :class="{ 'ring ring-purple-100': ring }">
         <div>{{ selectedOp.name }}</div>
         <div
           class="i-uil:angle-down w-5 h-5 transition-transform" :class="{ 'rotate-180': open }"
@@ -34,7 +34,7 @@ const optionsLeft = computed(() => rootPos.left.value)
       <Teleport to="body">
         <div
           ref="optionsEl"
-          class="z-51 absolute -mx-1 pt-1 pb-2 px-1 overflow-hidden"
+          class="z-51 absolute -mx-1 pt-1 pb-2 px-1 overflow-hidden "
           :style="{
             'top': `${optionsTop}px`,
             'left': `${optionsLeft}px`,
@@ -49,7 +49,7 @@ const optionsLeft = computed(() => rootPos.left.value)
             leave-from-class="translate-y-0 opacity-100"
             leave-to-class="-translate-y-2/3 opacity-0"
           >
-            <HListboxOptions class="py-1 w-full rounded-md shadow bg-white">
+            <HListboxOptions class="py-1 w-full rounded-md shadow bg-white dark:bg-gray-600">
               <HListboxOption
                 v-for="op in ops"
                 v-slot="{ active, selected }"
@@ -59,7 +59,7 @@ const optionsLeft = computed(() => rootPos.left.value)
               >
                 <span
                   class="block rounded-md whitespace-nowrap py-1 px-4 cursor-pointer select-none transition transition-colors"
-                  :class="[selected ? 'font-medium' : 'font-normal', active && 'bg-purple-100']"
+                  :class="[selected ? 'font-medium' : 'font-normal', active && 'bg-purple-100 dark:bg-gray-700']"
                 >
                   {{ op.name }}
                 </span>

components/video/SearchResult.vue

@@ -95,7 +95,7 @@ function updateVisibleSite(visible_site: number) {
       </div>
       <div class="flex items-center space-x-1">
         <div
-          v-for="(item, index) in VisibleSites" :key="item.value" class="py-0.5 px-2 rounded-md cursor-pointer text-purple-600" :class="{ 'bg-purple-100': index === visibleSite }"
+          v-for="(item, index) in VisibleSites" :key="item.value" class="py-0.5 px-2 rounded-md cursor-pointer text-purple-600 dark:text-purple-200" :class="{ 'bg-purple-100 dark:bg-purple-800': index !== visibleSite, 'bg-purple-200 dark:bg-purple-900': index === visibleSite }"
           @click="updateVisibleSite(index)"
         >
           {{ item.name }}

pages/search.vue

@@ -24,7 +24,7 @@ const Types = [
     name: t('search.search-result.playlist.tab'),
   },
 ]
-const activeTabClass = 'bg-white'
+const activeTabClass = 'bg-white dark:bg-gray-600'
 const type = computed(() => pickFirstQuery(route.query.type) || 'video')
 const page = computed(() => Number(pickFirstQuery(route.query.page)) || 1)
 const limit = computed(() => Number(pickFirstQuery(route.query.limit)) || 40)
@@ -64,16 +64,16 @@ function updateType(type: string) {
       {{ t('search.search-result.search-keywords') + queryWord }}
     </div>
     <div class="w-full flex space-x-2 text-purple-600">
-      <div class="flex-grow flex bg-purple-100 p-1.5 rounded-md">
+      <div class="flex-grow flex bg-purple-100 p-1.5 rounded-md dark:bg-gray-800">
         <div
-          v-for="item in Types" :key="item.value" class="px-4 md:px-6 py-0.5 md:py-2 rounded-md cursor-pointer" :class="item.value === type && activeTabClass"
+          v-for="item in Types" :key="item.value" class="px-4 md:px-6 py-0.5 md:py-2 rounded-md cursor-pointer dark:text-white " :class="item.value === type && activeTabClass"
           @click="updateType(item.value)"
         >
           {{ item.name }}
         </div>
       </div>
-      <div class="flex items-center space-x-2 bg-purple-100 p-1.5 rounded-md">
-        <PFormSelect v-model:selected-op="order" class="rounded-md bg-white md:px-2 md:py-1.5" :ops="Orders" />
+      <div class="flex items-center space-x-2 bg-purple-100 p-1.5 rounded-md dark:bg-gray-800">
+        <PFormSelect v-model:selected-op="order" class="rounded-md bg-white md:px-2 md:py-1.5 dark:bg-gray-600" :ops="Orders" />
       </div>
     </div>