From 25f4a7292aff32b9b02751b9ab2be94ca5373440 Mon Sep 17 00:00:00 2001
From: Lucas Nunes <2693803+lucascnunes@users.noreply.github.com>
Date: Tue, 6 Feb 2024 14:01:39 -0300
Subject: [PATCH] docs: minor fix to display the correct icon on dark mode
 (#326)

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

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 8ff32f0d..920487c5 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -138,17 +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()"
-            >
-              <component
-                :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                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>