style(ui): 💄 Added dark mode styles for several pages

PatchyVideo · Mar 31, 2024 · f8bb0cf · f8bb0cf
1 parent 003ffe4
commit f8bb0cf
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/components/search/Combo.vue b/components/search/Combo.vue
@@ -280,11 +280,11 @@ function onComboClick(combo: ComboTag) {
 
 <template>
   <div class="relative">
-    <div class="flex items-center rounded-md border-2 border-purple-200">
+    <div class="flex items-center rounded-md border-2 border-purple-200 dark:border-gray-700 dark:bg-gray-800">
       <input
         ref="inputEl"
         v-model="query"
-        class="focus:outline-none w-full ml-4 py-1"
+        class="focus:outline-none w-full ml-4 py-1 dark:bg-gray-800"
         placeholder="搜索你想看的内容"
         @focus="() => inFocus = true"
         @blur="() => inFocus = false"

diff --git a/components/toolbar/Top.vue b/components/toolbar/Top.vue
@@ -7,7 +7,7 @@ const showSlider = ref(false)
 </script>
 
 <template>
-  <div class="z-49 fixed top-0 left-0 right-0 bg-white dark:bg-black border border-b-2 border-gray-100">
+  <div class="z-49 fixed top-0 left-0 right-0 bg-white border border-b-2 border-gray-100 dark:border-gray-700 dark:bg-gray-900">
     <div class="flex px-2 lg:px-4 py-1 h-14 items-center">
       <!-- Start -->
       <ToolbarLogo v-model:show-slider="showSlider" />

diff --git a/components/toolbar/slider/index.vue b/components/toolbar/slider/index.vue
@@ -18,7 +18,7 @@ watchEffect(() => {
 <template>
   <div>
     <div
-      class="fixed left-0 inset-y-0 max-w-100vw overflow-auto z-50 pl-4 pr-10 py-1 bg-white shadow border-r border-purple-200 rounded-r-lg transform transition-transform duration-300 flex flex-col gap-4"
+      class="fixed left-0 inset-y-0 max-w-100vw overflow-auto z-50 pl-4 pr-10 py-1 bg-white shadow border-r border-purple-200 rounded-r-lg transform transition-transform duration-300 flex flex-col gap-4 dark:border-gray-700 bg-white dark:bg-gray-900"
       :class=" { '-translate-x-full translate-y-0': !show }"
     >
       <ToolbarLogo v-model:show-slider="show" class="flex-grow-0" />