improve theme management

components/btn/Theme.vue

@@ -12,8 +12,7 @@
 <script>
 export default {
   mounted() {
-    const initUserTheme = this.getMediaPreference();
-    this.setTheme(initUserTheme);
+    this.setTheme(localStorage.getItem("user-theme"))
   },
 
   data() {
@@ -24,23 +23,19 @@ export default {
 
   methods: {
     toggleTheme() {
-      const activeTheme = localStorage.getItem("user-theme");
-      if (activeTheme === "light-theme") {
-        this.setTheme("dark-theme");
+      if (this.userTheme === "light-theme") {
+        this.setTheme("dark-theme")
       } else {
-        this.setTheme("light-theme");
+        this.setTheme("light-theme")
       }
     },
 
     setTheme(theme) {
-      localStorage.setItem("user-theme", theme);
-      this.userTheme = theme;
-      document.documentElement.className = theme;
-    },
-
-    getMediaPreference() {
-      return localStorage.getItem("user-theme");
-    },
+      if (theme == null) {theme="light-theme"}
+      localStorage.setItem("user-theme", theme)
+      this.userTheme = theme
+      document.documentElement.className = theme
+    }
   },
 };
 </script>