From bfefebb21392589207bfdad04b1cc2550ad36b21 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Fri, 20 Dec 2024 20:34:08 +0600
Subject: [PATCH] Updated: Dark mode component preview.

---
 .../dark-mode/DarkModeForNuxt.vue             | 24 ++++++++++++++++--
 .../dark-mode/DarkModeForVue.vue              | 25 +++++++++++++++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/components/content/docs/getting-started/dark-mode/DarkModeForNuxt.vue b/components/content/docs/getting-started/dark-mode/DarkModeForNuxt.vue
index 400de16c..e6b10a8c 100644
--- a/components/content/docs/getting-started/dark-mode/DarkModeForNuxt.vue
+++ b/components/content/docs/getting-started/dark-mode/DarkModeForNuxt.vue
@@ -8,7 +8,11 @@ import {
   NuxtModuleAddCode,
   nuxtThemeSwitcherCode,
 } from "./darkModeCodes";
-import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
+const colorMode = useColorMode();
+
+const toggleTheme = () => {
+  colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
+};
 </script>
 
 <template>
@@ -80,7 +84,23 @@ import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
         </p>
         <div class="!my-4">
           <CodeHighlightWithPreview :code="nuxtThemeSwitcherCode">
-            <ThemeSwitcherForDoc />
+            <div class="flex items-center justify-center">
+              <ClientOnly>
+                <Button
+                  class="rounded-lg bg-primary-25 p-2.5 hover:bg-primary-50 dark:bg-metal-600 dark:hover:bg-metal-700"
+                  @click="() => toggleTheme()">
+                  <PhosphorIconMoon
+                    v-if="colorMode.preference === 'dark'"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                  <PhosphorIconSunDim
+                    v-else
+                    color="black"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                </Button>
+              </ClientOnly>
+            </div>
           </CodeHighlightWithPreview>
         </div>
       </TimelineContent>
diff --git a/components/content/docs/getting-started/dark-mode/DarkModeForVue.vue b/components/content/docs/getting-started/dark-mode/DarkModeForVue.vue
index 03658535..cc75d323 100644
--- a/components/content/docs/getting-started/dark-mode/DarkModeForVue.vue
+++ b/components/content/docs/getting-started/dark-mode/DarkModeForVue.vue
@@ -6,7 +6,12 @@ import {
   vueThemeSwitcherComponentCode,
   vueUseInstallForVue,
 } from "./darkModeCodes";
-import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
+
+const colorMode = useColorMode();
+
+const toggleTheme = () => {
+  colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
+};
 </script>
 
 <template>
@@ -44,7 +49,23 @@ import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
         </p>
         <div class="!my-4">
           <CodeHighlightWithPreview :code="vueThemeSwitcherComponentCode">
-            <ThemeSwitcherForDoc />
+            <div class="flex items-center justify-center">
+              <ClientOnly>
+                <Button
+                  class="rounded-lg bg-primary-25 p-2.5 hover:bg-primary-50 dark:bg-metal-600 dark:hover:bg-metal-700"
+                  @click="() => toggleTheme()">
+                  <PhosphorIconMoon
+                    v-if="colorMode.preference === 'dark'"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                  <PhosphorIconSunDim
+                    v-else
+                    color="black"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                </Button>
+              </ClientOnly>
+            </div>
           </CodeHighlightWithPreview>
         </div>
       </TimelineContent>