docs: improve styles in dark mode

Author: antfu

docs/.vitepress/components/DropdownMobileDemo.vue

@@ -51,7 +51,7 @@ export default {
 
           <div v-if="isMobile">
             <button
-              class="bg-gray-300 rounded px-4 py-2 w-full"
+              class="bg-gray-300/25 rounded px-4 py-2 w-full"
               @click="hide()"
             >
               Cancel

docs/.vitepress/components/DropdownPlacement.vue

@@ -30,7 +30,7 @@
 
     <select
       v-model="placement"
-      class="bg-gray-300 rounded px-4 py-2"
+      class="bg-gray-300/25 rounded px-4 py-2"
     >
       <option
         v-for="p of placements"

docs/.vitepress/components/TooltipPlacement.vue

@@ -16,7 +16,7 @@
 
     <select
       v-model="placement"
-      class="bg-gray-300 rounded px-4 py-2"
+      class="bg-gray-300/25 rounded px-4 py-2"
     >
       <option
         v-for="p of placements"

docs/.vitepress/components/theme-editor/Button.vue

@@ -23,7 +23,7 @@ export default {
         hover: 'hover:bg-red-200 hover:text-red-900',
       },
       gray: {
-        normal: 'bg-gray-300 text-gray-900',
+        normal: 'bg-gray-300/25 text-gray-900',
         hover: 'hover:bg-gray-200 hover:text-gray-900',
       },
     }

docs/.vitepress/theme/style.postcss

@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 .example {
-  @apply border-gray-300 border rounded-lg bg-gray-100 p-6 text-center;
+  @apply border-gray-500/25 border rounded-lg p-6 text-center;
+  background-color: var(--vp-c-mute);
 }
 
 .v-popper__popper {