From 7ecc8e871803926c9c60af3227b97e9b301c4012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= <yael.guilloux@gmail.com>
Date: Mon, 20 Jun 2022 11:34:56 +0200
Subject: [PATCH] fix(theme-select): fix flicker on client-side

---
 packages/docs-theme/components/content/ThemeSelect.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/docs-theme/components/content/ThemeSelect.vue b/packages/docs-theme/components/content/ThemeSelect.vue
index 1e3ad4f4a..20c706d98 100644
--- 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>