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.

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>