refactor(theme): the theme method of initialization (#33)

Author: LandmineHQ

public/theme-init.js

@@ -19,7 +19,7 @@
     document.head.appendChild(style);
   }
 
-  function readThemeCookie() {
+  function isDarkTheme() {
     var themeCookie = document.cookie
       .split("; ")
       .find(function (row) {
@@ -39,7 +39,7 @@
   }
 
   function initTheme() {
-    var dark = readThemeCookie();
+    var dark = isDarkTheme();
     syncThemeDom(dark);
     return dark;
   }
@@ -55,7 +55,7 @@
   }
 
   window.__NODEGET_THEME__ = {
-    readThemeCookie: readThemeCookie,
+    isDarkTheme: isDarkTheme,
     syncThemeDom: syncThemeDom,
     initTheme: initTheme,
     applyTheme: applyTheme,

src/main.ts

@@ -4,7 +4,6 @@ import { createPersistedState } from "pinia-plugin-persistedstate";
 import { createI18n } from "vue-i18n";
 import App from "./App.vue";
 import router from "./router";
-import { useThemeStore } from "./stores/theme";
 import routePrefetchPlugin from "./router/prefetchPlugin";
 import "./style/app.css";
 import en from "./locales/en";
@@ -32,7 +31,6 @@ const i18n = createI18n({
 });
 
 pinia.use(createPersistedState());
-useThemeStore(pinia).init();
 
 app.use(pinia);
 app.use(routePrefetchPlugin(router));

src/stores/theme.ts

@@ -3,11 +3,7 @@ import { ref } from "vue";
 import { applyTheme, initTheme } from "@/theme/dom";
 
 export const useThemeStore = defineStore("theme", () => {
-  const isDark = ref(false);
-
-  const init = () => {
-    isDark.value = initTheme();
-  };
+  const isDark = ref(!!initTheme());
 
   const setTheme = (dark: boolean) => {
     isDark.value = dark;
@@ -18,5 +14,5 @@ export const useThemeStore = defineStore("theme", () => {
     setTheme(!isDark.value);
   };
 
-  return { isDark, init, setTheme, toggle };
+  return { isDark, setTheme, toggle };
 });

src/theme/dom.ts

@@ -1,5 +1,5 @@
 type ThemeApi = {
-  readThemeCookie: () => boolean;
+  isDarkTheme: () => boolean;
   syncThemeDom: (dark: boolean) => void;
   initTheme: () => boolean;
   applyTheme: (dark: boolean) => void;
@@ -21,7 +21,7 @@ const getThemeApi = () => {
   return api;
 };
 
-export const readThemeCookie = () => getThemeApi().readThemeCookie();
+export const isDarkTheme = () => getThemeApi().isDarkTheme();
 
 export const syncThemeDom = (dark: boolean) => getThemeApi().syncThemeDom(dark);