fix(theme-select): fix flicker on client-side

nuxt-themes · Jun 20, 2022 · 7ecc8e8 · 7ecc8e8
1 parent 4720f14
commit 7ecc8e8
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/packages/docs-theme/components/content/ThemeSelect.vue b/packages/docs-theme/components/content/ThemeSelect.vue
@@ -31,11 +31,13 @@ const onClick = () => (mode.value === 'light' ? (mode.value = 'dark') : (mode.va
 <template>
   <button :class="[size, spacing]" class="u-text-gray-500 hover:u-text-gray-700 block" aria-label="Color Mode" @click="onClick">
     <ClientOnly>
-      <Icon v-if="mode === 'dark'" name="heroicons-outline:sun" :class="[spacing, size]" />
-      <Icon v-else name="heroicons-outline:moon" :class="[spacing, size]" />
+      <span :class="[spacing, size]">
+        <Icon v-show="mode === 'dark'" name="heroicons-outline:sun" :class="[spacing, size]" />
+        <Icon v-show="mode !== 'dark'" name="heroicons-outline:moon" :class="[spacing, size]" />
+      </span>
 
       <template #placeholder>
-        <span class="block" :class="[size, spacing]"> ... </span>
+        <span class="block" :class="[size, spacing]">...</span>
       </template>
     </ClientOnly>
   </button>