feat: update header button styles

Author: phojie

components/DarkModeToggle.vue

@@ -9,9 +9,9 @@ function toggleDark() {
   <NButton
     btn="ghost-gray"
     class="text-base"
-    square
+    square="8"
     icon
-    label="i-radix-icons-sun dark:i-radix-icons-moon"
+    label="dark:i-radix-icons-sun i-radix-icons-moon"
     aria-label="Color Mode"
     @click="toggleDark"
   />

components/layout/Header.vue

@@ -30,19 +30,30 @@ const config = useConfig()
 
       <div class="flex flex-1 justify-end gap-2">
         <LayoutSearchButton v-if="!config.search.inAside" />
-        <div class="inline-flex gap-1">
+        <div class="inline-flex">
           <NButton
             v-for="(link, i) in config.header.links"
             :key="i"
             btn="ghost-gray"
             class="hidden text-base md:flex"
             v-bind="link"
-            square
+            square="8"
             icon
             :label="link.icon"
           />
           <DarkModeToggle v-if="config.header.darkModeToggle" />
-          <NThemeSwitcher v-if="config.theme.customizable" />
+
+          <NThemeSwitcher v-if="config.theme.customizable">
+            <template #trigger="{ open }">
+              <NButton
+                :btn="open ? 'soft-gray' : 'ghost-gray'"
+                icon
+                class="text-base"
+                square="8"
+                label="i-lucide-paintbrush"
+              />
+            </template>
+          </NThemeSwitcher>
         </div>
       </div>
     </div>

components/layout/Header/Nav.vue

@@ -9,7 +9,7 @@ const { nav } = useConfig().value.header
     <CommonNavigationMenuList>
       <CommonNavigationMenuItem v-for="(item, i) in nav" :key="i" class="relative">
         <template v-if="item.links">
-          <CommonNavigationMenuTrigger class="bg-transparent font-semibold">
+          <CommonNavigationMenuTrigger class="h-8 bg-transparent font-semibold">
             {{ item.title }}
           </CommonNavigationMenuTrigger>
           <CommonNavigationMenuContent>

components/layout/SearchButton.vue

@@ -7,8 +7,8 @@ const { enable, inAside, style, placeholder } = useConfig().value.search
   <template v-if="enable">
     <NButton
       v-if="style === 'input'"
-      btn="solid-white"
-      class="h-auto w-full"
+      btn="solid-gray"
+      class="h-8 w-full p-2"
       :class="[inAside ? 'mb-4' : 'md:w-40 lg:w-64']"
       @click="isOpen = true"
     >
@@ -23,7 +23,6 @@ const { enable, inAside, style, placeholder } = useConfig().value.search
       v-else
       btn="ghost-gray"
       icon
-      square
       label="i-lucide-search"
       @click="isOpen = true"
     />