diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 80f45f1..6a24704 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.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"
       },
@@ -5003,11 +5002,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/theme-change": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.0.2.tgz",
-      "integrity": "sha512-YvQqavf8nlGB3J7PdO0zLLhSLlgYhrqZL6By3FuzFIlWBsPTSPG/V98cHJllK3mmU97Jecei8XYiHalhy2umUw=="
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -9138,11 +9132,6 @@
         }
       }
     },
-    "theme-change": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.0.2.tgz",
-      "integrity": "sha512-YvQqavf8nlGB3J7PdO0zLLhSLlgYhrqZL6By3FuzFIlWBsPTSPG/V98cHJllK3mmU97Jecei8XYiHalhy2umUw=="
-    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6e5bcd1..3edca78 100644
--- 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
index 8457163..713283b 100644
--- 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
index ddf16b4..064969c 100644
--- 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>