From c646eb129ca755d8297a713d33d0db79d68e822d Mon Sep 17 00:00:00 2001
From: Lucas Nunes <2693803+lucascnunes@users.noreply.github.com>
Date: Mon, 5 Feb 2024 21:25:42 -0300
Subject: [PATCH] fix: fixing glitch on dark mode icon

fixing the glitch when reloading the page on dark mode and the icon changing back to light mode.
---
 .../.vitepress/theme/layout/MainLayout.vue    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index e90f75ff..920487c5 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -138,20 +138,19 @@ watch(() => $route.path, (n) => {
               <component :is="link.icon" class="w-[20px] h-5" />
             </Button>
 
-            <Button
-              class="flex items-center justify-center"
-              aria-label="Toggle dark mode"
-              :variant="'ghost'"
-              :size="'icon'" @click="toggleDark()"
-            >
-              <!-- workaround for bug with component when refreshing the page -->
-              <component
-                :is="RadixIconsMoon"
-                v-if="!isDark"
-                class="w-[20px] h-5 text-foreground"
-              />
-              <RadixIconsSun v-if="isDark" class="w-[20px] h-5 text-foreground" />
-            </Button>
+            <ClientOnly>
+              <Button
+                class="flex items-center justify-center"
+                aria-label="Toggle dark mode"
+                :variant="'ghost'"
+                :size="'icon'" @click="toggleDark()"
+              >
+                <component
+                  :is="isDark ? RadixIconsSun : RadixIconsMoon"
+                  class="w-[20px] h-5 text-foreground"
+                />
+              </Button>
+            </ClientOnly>
           </div>
         </div>
       </div>