docs: prevent hydration mismatch by checking isMounted before rendering dark/light mode theme toggle button (#1209)

* fix(MainLayout): prevent hydration mismatch on dark/light mode theme toggle

* fix(MainLayout): prevent hydration mismatch by wrapping theme toggle icon with ClientOnly component

Author: gungdekrisna

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -138,10 +138,12 @@ function handleSelectLink(item: NavItem) {
                       :size="'icon'"
                       @click="toggleDark()"
                     >
-                      <component
-                        :is="isDark ? SunIcon : MoonIcon"
-                        class="w-4 h-4 text-foreground"
-                      />
+                      <ClientOnly>
+                        <component
+                          :is="isDark ? SunIcon : MoonIcon"
+                          class="w-4 h-4 text-foreground"
+                        />
+                      </ClientOnly>
                     </Button>
                   </nav>
                 </div>