Fix dark theme toggle

linkie · Jun 2, 2022 · 95ecec4 · 95ecec4
1 parent c34525a
commit 95ecec4
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,7 +12,6 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.0-rc.10",
     "pinia-plugin-persistedstate": "^1.6.1",
-    "theme-change": "^2.0.2",
     "vue": "^3.2.25",
     "vue-axios": "^3.4.1"
   },

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -7,8 +7,6 @@ import Mappings from "./routes/Mappings.vue"
 import OpenSourceLicenses from "./routes/OpenSourceLicenses.vue"
 import NotFound from "./routes/NotFound.vue"
 import {Alert, useAlertsStore} from "./app/alerts-store"
-// @ts-ignore
-import {themeChange} from "theme-change"
 import {mapActions, mapState} from "pinia"
 
 import Footer from "./components/Footer.vue"
@@ -41,7 +39,13 @@ export default defineComponent({
         ...mapActions(useAlertsStore, ["removeAlert"]),
     },
     mounted() {
-        themeChange(false)
+        let theme = localStorage.getItem("theme")
+        if (theme) {
+            document.documentElement.setAttribute("data-theme", theme)
+        } else {
+            localStorage.setItem("theme", "cupcake")
+            document.documentElement.setAttribute("data-theme", "cupcake")
+        }
     },
 })
 

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -12,7 +12,7 @@
                 <li>
                     <label class="cursor-pointer">
                         Dark Mode
-                        <input type="checkbox" class="toggle" :checked="darkMode" data-toggle-theme="dark,cupcake" data-act-class="ACTIVECLASS"/>
+                        <input type="checkbox" class="toggle" :checked="darkMode" @click="setDarkMode(($event.target as any)?.checked ?? darkMode)"/>
                     </label>
                 </li>
             </ul>
@@ -30,6 +30,12 @@ export default defineComponent({
             return localStorage.getItem("theme") === "dark"
         },
     },
+    methods: {
+        setDarkMode(darkMode: boolean) {
+            localStorage.setItem("theme", darkMode ? "dark" : "cupcake");
+            document.documentElement.setAttribute("data-theme", localStorage.getItem("theme")!);
+        },
+    },
 })
 </script>