🧑‍💻 use vueuse to toggle theme

csc530 · Jul 31, 2024 · d6e05fd · d6e05fd
1 parent 1984f32
commit d6e05fd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -18,11 +18,8 @@
 </style>
 
 <script setup lang="ts">
-    import { RouterLink, RouterView } from "vue-router";
-    import HelloWorld from "./components/HelloWorld.vue";
-    import { getActivePinia } from "pinia";
+    import { RouterView } from "vue-router";
     import TheNav from "@/components/TheNav.vue";
     import TheFoot from "@/components/TheFoot.vue";
 
-    document.documentElement.dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "mocha" : "latte";
 </script>
diff --git a/src/components/TheNav.vue b/src/components/TheNav.vue
@@ -22,20 +22,20 @@
 
         <div class="navbar-end">
             <div class="navbar-item">
-                <img @click="toggleTheme" :src="themeIcons[theme]" alt="theme icon" decoding="auto" loading="lazy" />
+                <img @click="toggleTheme" :src="themeIcons[colourTheme]" alt="theme icon" decoding="auto"
+                        loading="lazy" />
             </div>
         </div>
 
     </nav>
 </template>
 
-<style scoped>
-
-</style>
-
 <script setup lang="ts">
-    import {useRoute, useRouter} from "vue-router";
-    import {computed, type Events, ref} from "vue";
+    import {useRouter} from "vue-router";
+    import {ref,} from "vue";
+    import {PuccinTheme} from "@/types/helper";
+    import {useColorMode, usePreferredDark} from "@vueuse/core";
+    import consola from "consola";
 
     const router = useRouter();
     const routes = router.getRoutes();
@@ -48,21 +48,22 @@
             hamburgerRef.value.ariaExpanded = String(hamburgerRef.value.classList.toggle("is-active"));
     }
 
-    enum Theme {
-        latte = "latte",
-        mocha = "mocha",
-    }
-
     const themeIcons = {
-      [Theme.latte]: "https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/latte_squircle.png?raw=true",// 'https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/latte_squircle.png?raw=true',
-      [Theme.mocha]: "https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/macchiato_squircle.png?raw=true"
+        [PuccinTheme.latte]: "https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/latte_squircle.png?raw=true",// 'https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/latte_squircle.png?raw=true',
+        [PuccinTheme.mocha]: "https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/macchiato_squircle.png?raw=true"
     };
-    const theme = ref(window.matchMedia("(prefers-color-scheme: dark)").matches ? Theme.mocha : Theme.latte);
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => theme.value = event.matches ? Theme.mocha : Theme.latte);
+    const colourTheme = useColorMode({
+        attribute: "data-theme",
+        modes: {
+            [PuccinTheme.latte]: PuccinTheme.latte,
+            [PuccinTheme.mocha]: PuccinTheme.mocha
+        }
+    });
 
     function toggleTheme() {
-        theme.value = theme.value === Theme.latte ? Theme.mocha : Theme.latte;
-        document.documentElement.setAttribute("data-theme", theme.value);
+        colourTheme.value = colourTheme.value === PuccinTheme.latte ? PuccinTheme.mocha : PuccinTheme.latte;
+        consola.log(colourTheme.value);
     }
 
+    colourTheme.value = usePreferredDark() ? PuccinTheme.mocha : PuccinTheme.latte;
 </script>
diff --git a/src/types/helper.ts b/src/types/helper.ts
@@ -0,0 +1,4 @@
+export enum PuccinTheme {
+    latte = "latte",
+    mocha = "mocha",
+}