fixed 深色模式下，刷新页面后右上角图标重影 kingwrcy#129

components/HeaderImg.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header relative mb-8 ">
     <img class="header-img w-full  " :src="getImgUrl(res?.data?.coverUrl!)" alt="" />
-	  
+
     <div class="absolute left-2 top-2 rounded p-1 flex flex-row gap-2">
       <div title="返回" v-if="showBack()" @click="navigateTo('/')">
         <ArrowLeft color="#9FC84A" :size="20" class="cursor-pointer" />
@@ -15,19 +15,19 @@
       <div class="userinfo flex flex-col">
         <div class="flex flex-row items-center gap-4 justify-end">
           <div class="username text-lg font-bold text-white">{{ res?.data?.nickname }}</div>
-          <img :src="getImgUrl(res?.data?.avatarUrl!)" class="avatar w-[70px] h-[70px] rounded-xl" @click="navigateTo('/')" :class="{'cursor-pointer':route.path.startsWith('/detail')}" />
+          <img :src="getImgUrl(res?.data?.avatarUrl!)" class="avatar w-[70px] h-[70px] rounded-xl"
+            @click="navigateTo('/')" :class="{ 'cursor-pointer': route.path.startsWith('/detail') }" />
         </div>
         <div class="slogon text-gray truncate w-full text-end text-xs mt-2">{{ res?.data?.slogan }}</div>
       </div>
     </div>
 
     <div class="absolute right-2 top-2 rounded p-1 flex flex-row gap-2">
-      <div title="亮色" v-if="colorMode === 'dark'" @click="colorMode = 'light'">
-        <Sun color="#FDE047" :size="20" class="cursor-pointer" />
-      </div>
-      <div title="暗色" v-else>
-        <MoonStar color="#FDE047" :size="20" class="cursor-pointer" @click="colorMode = 'dark'" />
-      </div>
+      <ClientOnly>
+        <Sun color="#FDE047" :size="20" class="cursor-pointer" v-if="colorMode === 'dark'"
+          @click="colorMode = 'light'" />
+        <MoonStar color="#FDE047" :size="20" class="cursor-pointer" v-else @click="colorMode = 'dark'" />
+      </ClientOnly>
     </div>
 
   </div>