Updated: Dark mode component preview.

StaticMania · Dec 20, 2024 · bfefebb · bfefebb
1 parent 5c400ad
commit bfefebb
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git 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
@@ -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>