feat: adapt new theme

terwer · Apr 20, 2024 · 858c08c · 858c08c
1 parent 5abe90e
commit 858c08c
Show file tree

Hide file tree

Showing 7 changed files with 441 additions and 80 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -37,6 +37,7 @@ interface AppConfig {
     mode?: ThemeType
     lightTheme?: string
     darkTheme?: string
+    themeVersion?: string
   }
 
   // 加上字符串索引签名，兼容 AppConfigInput 约束

diff --git a/composables/useStaticThemeMode.ts b/composables/useStaticThemeMode.ts
@@ -25,14 +25,19 @@
 
 import { BrowserUtil } from "zhi-device"
 import { createAppLogger } from "~/common/appLogger"
+import { CONSTANTS } from "~/utils/constants"
 
 // 创建日志记录器
 const logger = createAppLogger("use-theme-mode")
 
+/**
+ * 注意：静态模式不能查询，只能通过参数传递进来
+ */
 export const useStaticThemeMode = async () => {
   // 获取颜色模式和运行时配置
   const color = useColorMode()
-  const env = useRuntimeConfig()
+  // const env = useRuntimeConfig()
+
   const appBase = process.env.APP_BASE
 
   // computes
@@ -57,11 +62,11 @@ export const useStaticThemeMode = async () => {
   // onMounted(() => {
   // })
 
-  const siyuanV = "2.9.1"
-  const hljsV = "11.5.0"
-  const siyuanLightTheme = "Zhihu"
-  const siyuanDarkTheme = "Zhihu"
-  const siyuanThemeV = "0.0.7"
+  const siyuanV = CONSTANTS.SIYUAN_VERSION
+  const hljsV = CONSTANTS.HLJS_VERSION
+  const siyuanLightTheme = "Zhihu" as string
+  const siyuanDarkTheme = "Zhihu" as string
+  const siyuanThemeV = "0.1.1"
   const detectedMode = color.preference
   const isDarkMode = detectedMode === "dark"
   useHead({
@@ -77,13 +82,17 @@ export const useStaticThemeMode = async () => {
         id: "themeDefaultStyle",
         href: `${appBase}resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`,
       },
-      {
-        rel: "stylesheet",
-        id: "themeStyle",
-        href: `${appBase}resources/appearance/themes/${
-          isDarkMode ? siyuanDarkTheme : siyuanLightTheme
-        }/theme.css?v=${siyuanThemeV}`,
-      },
+      ...(siyuanLightTheme !== "daylight" && siyuanDarkTheme !== "midlight"
+        ? [
+            {
+              rel: "stylesheet",
+              id: "themeStyle",
+              href: `${appBase}resources/appearance/themes/${
+                isDarkMode ? siyuanDarkTheme : siyuanLightTheme
+              }/theme.css?v=${siyuanThemeV}`,
+            },
+          ]
+        : []),
       {
         rel: "stylesheet",
         id: "protyleHljsStyle",

diff --git a/composables/useThemeMode.ts b/composables/useThemeMode.ts
@@ -26,6 +26,7 @@
 import { BrowserUtil, SiyuanDevice } from "zhi-device"
 import { createAppLogger } from "~/common/appLogger"
 import { useSettingStore } from "~/stores/useSettingStore"
+import { CONSTANTS } from "~/utils/constants"
 
 // 创建日志记录器
 const logger = createAppLogger("use-theme-mode")
@@ -71,13 +72,13 @@ export const useThemeMode = async () => {
   onMounted(() => {})
 
   const setting = await getSetting()
-  const siyuanV = "2.9.1"
-  const hljsV = "11.5.0"
+  const siyuanV = CONSTANTS.SIYUAN_VERSION
+  const hljsV = CONSTANTS.HLJS_VERSION
   const siyuanLightTheme = setting?.theme?.lightTheme ?? "Zhihu"
   const siyuanDarkTheme = setting?.theme?.darkTheme ?? "Zhihu"
-  const siyuanThemeV = "0.0.7"
+  const siyuanThemeV = setting?.theme?.themeVersion ?? "0.1.1"
   const win = SiyuanDevice.siyuanWindow()
-  const isDarkMode = win.matchMedia("(prefers-color-scheme: dark)").matches
+  const isDarkMode = win?.matchMedia("(prefers-color-scheme: dark)").matches
   const detectedMode = isDarkMode ? "dark" : "light"
   // const detectedMode  setting?.theme?.mode ?? color.preference
   // const isDarkMode = detectedMode === "dark"
@@ -94,7 +95,7 @@ export const useThemeMode = async () => {
         id: "themeDefaultStyle",
         href: `${appBase}resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`,
       },
-      ...((siyuanLightTheme && siyuanLightTheme !== "daylight") || (siyuanDarkTheme && siyuanDarkTheme !== "midlight")
+      ...(siyuanLightTheme !== "daylight" && siyuanDarkTheme !== "midlight"
         ? [
             {
               rel: "stylesheet",