fix: #385 dark mode is back again

terwer · Dec 19, 2024 · 0781d6f · 0781d6f
1 parent 3113892
commit 0781d6f
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 32 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -67,7 +67,8 @@ export default defineAppConfig<AppConfig>({
   customCss: [
     {
       name: "custom.css",
-      content: "body { background-color: #f5f5f5; }",
+      // content: "body { background-color: #f5f5f5; }",
+      content: "",
     },
   ],
 

diff --git a/components/static/Footer.vue b/components/static/Footer.vue
@@ -2,10 +2,10 @@
 import { useStaticSettingStore } from "~/stores/useStaticSettingStore"
 import { useI18n } from "vue-i18n"
 
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 const { getStaticSetting } = useStaticSettingStore()
 const setting = await getStaticSetting()
-await useStaticThemeMode()
+const { colorMode, toggleDark } = await useStaticThemeMode()
 
 const VNode = () =>
   h("div", {
@@ -25,5 +25,73 @@ onBeforeMount(() => {
 <template>
   <div class="footer">
     <VNode />
+    <div class="theme-toggle" @click="toggleDark()">
+      <div class="theme-option" :class="{ active: !colorMode }">
+        {{ t("theme.mode.light") }}
+      </div>
+      <div class="theme-option" :class="{ active: colorMode }">
+        {{ t("theme.mode.dark") }}
+      </div>
+    </div>
   </div>
 </template>
+
+<style>
+:root {
+  --footer-only-background-color: #ffffff;
+  --footer-only-hover-background-color: #f0f0f0;
+  --footer-only-active-background-color: #007bff;
+  --footer-only-border-color: #ccc;
+  --footer-only-text-color: #333;
+  --footer-only-active-text-color: #ffffff;
+}
+
+html[data-theme-mode="dark"] {
+  --footer-only-background-color: #444444; /* 深色背景 */
+  --footer-only-hover-background-color: #555555; /* 悬浮背景 */
+  --footer-only-active-background-color: #ffa500; /* 激活项背景 */
+  --footer-only-border-color: #666666; /* 边框深色 */
+  --footer-only-text-color: #f0f0f0; /* 默认文字浅色 */
+  --footer-only-active-text-color: #333333; /* 激活项文字深色 */
+}
+</style>
+<style scoped>
+.footer {
+  font-size: 12px;
+  color: #bbb;
+  text-align: center;
+  padding-bottom: 8px;
+}
+
+.theme-toggle {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--footer-only-background-color, #ffffff);
+  border: 1px solid var(--footer-only-border-color, #ccc);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+.theme-option {
+  padding: 10px 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--footer-only-text-color, #333);
+}
+
+.theme-option:hover {
+  background-color: var(--footer-only-hover-background-color, #f0f0f0);
+}
+
+.theme-option.active {
+  background-color: var(--footer-only-active-background-color, #007bff);
+  color: var(--footer-only-active-text-color, #ffffff);
+}
+</style>
diff --git a/composables/useSiyuanDevice.ts b/composables/useSiyuanDevice.ts
@@ -43,7 +43,7 @@ export const useSiyuanDevice = () => {
   const isInSiyuanWidget = () => {
     const deviceType = DeviceDetection.getDevice()
     const isSiyuanOrSiyuanNewWin = deviceType === DeviceTypeEnum.DeviceType_Siyuan_Widget
-    logger.debug("deviceType=>", deviceType)
+    logger.info("deviceType=>", deviceType)
     logger.debug("isSiyuanOrSiyuanNewWin=>", String(isSiyuanOrSiyuanNewWin))
     return isSiyuanOrSiyuanNewWin
   }
@@ -52,7 +52,7 @@ export const useSiyuanDevice = () => {
     const deviceType = DeviceDetection.getDevice()
     const isSiyuanOrSiyuanNewWin =
       deviceType === DeviceTypeEnum.DeviceType_Siyuan_MainWin ||
-      deviceType === DeviceTypeEnum.DeviceType_Siyuan_NewWin ||
+      deviceType === DeviceTypeEnum.DeviceType_Siyuan_RendererWin ||
       deviceType === DeviceTypeEnum.DeviceType_Siyuan_Widget
     logger.debug("deviceType=>", deviceType)
     logger.debug("isSiyuanOrSiyuanNewWin=>", String(isSiyuanOrSiyuanNewWin))

diff --git a/composables/useStaticThemeMode.ts b/composables/useStaticThemeMode.ts
@@ -23,11 +23,10 @@
  * questions.
  */
 
-import { BrowserUtil } from "zhi-device"
+import { BrowserUtil, SiyuanDevice } from "zhi-device"
 import { createAppLogger } from "~/common/appLogger"
 import { CONSTANTS } from "~/utils/constants"
 import { useRoute } from "vue-router"
-import { useProviderMode } from "~/composables/useProviderMode"
 import { useStaticSettingStore } from "~/stores/useStaticSettingStore"
 
 // 创建日志记录器
@@ -40,12 +39,18 @@ export const useStaticThemeMode = async () => {
   // 获取颜色模式和运行时配置
   const color = useColorMode()
   const { query } = useRoute()
-  const { providerMode } = useProviderMode()
   const appBase = process.env.APP_BASE
   const { getStaticSetting } = useStaticSettingStore()
 
   // 在 mounted 生命周期中处理加载后逻辑
-  onMounted(() => {})
+  onMounted(() => {
+    // 检测浏览器不是暗黑模式，根据媒介查询
+    const win = SiyuanDevice.siyuanWindow()
+    const isDarkMode = !BrowserUtil.hasNodeEnv() && win.matchMedia("(prefers-color-scheme: dark)").matches
+    if (isDarkMode) {
+      setThemeMode(true)
+    }
+  })
 
   // computes
   // 获取颜色模式并暴露 computed 属性
@@ -125,28 +130,35 @@ export const useStaticThemeMode = async () => {
 
   // 设置主题模式
   const setThemeMode = (isDarkMode: boolean) => {
+    if (isDarkMode) {
+      document.body.style.backgroundColor = "unset"
+    } else {
+      document.body.style.backgroundColor = "#f5f5f5"
+    }
     if (BrowserUtil.isInBrowser) {
       setCssAndThemeMode(isDarkMode)
       // 记录日志
       logger.debug(isDarkMode ? "Browser Dark Mode" : "Browser Light Mode")
       logger.info(`Auto set mode, isDark => ${isDarkMode}`)
     }
-
     color.preference = isDarkMode ? "dark" : "light"
   }
 
   // 根据浏览器模式设置 CSS 和主题模式
   const setCssAndThemeMode = (isDarkMode: boolean) => {
     // 默认主题适配
     const themeDefaultStyle = document.querySelector("#themeDefaultStyle") as any
-    themeDefaultStyle.href =
-      appBase + `resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`
+    if (themeDefaultStyle) {
+      themeDefaultStyle.href =
+        appBase + `resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`
+    }
 
     // 代码块适配
     const protyleHljsStyle = document.querySelector("#protyleHljsStyle") as any
-    protyleHljsStyle.href =
-      appBase + `resources/stage/protyle/js/highlight.js/styles/vs${isDarkMode ? "2015" : ""}.min.css?v=${hljsV}`
-
+    if (protyleHljsStyle) {
+      protyleHljsStyle.href =
+        appBase + `resources/stage/protyle/js/highlight.js/styles/vs${isDarkMode ? "2015" : ""}.min.css?v=${hljsV}`
+    }
     // 颜色模式属性
     document.documentElement.dataset.themeMode = isDarkMode ? "dark" : "light"
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -9,7 +9,7 @@ const generateDynamicV = () => {
 }
 
 const isDev = process.env.NODE_ENV === "development"
-const appBase = "/"
+const appBase = "/plugins/siyuan-blog/"
 const staticV = generateDynamicV()
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -24,7 +24,14 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
+  modules: [
+    "@vueuse/nuxt",
+    "@nuxtjs/i18n-edge",
+    "@element-plus/nuxt",
+    "@nuxtjs/color-mode",
+    "@pinia/nuxt",
+    "@nuxt/image",
+  ],
 
   // vueuse
   vueuse: {
@@ -47,7 +54,7 @@ export default defineNuxtConfig({
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,
       "process.env.APP_BASE": `"${appBase}"`,
-      "process.env.SSR": `"true"`,
+      "process.env.SSR": `"false"`,
     },
     plugins: [],
     css: {
@@ -66,6 +73,14 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
+  // https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
+  ssr: false,
+  router: {
+    options: {
+      hashMode: true,
+    },
+  },
+
   css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
@@ -94,12 +109,12 @@ export default defineNuxtConfig({
       // https://nuxt.com/docs/api/configuration/nuxt-config#head
       script: isDev
         ? [
-            // {
-            //   src: appBase + "libs/eruda/eruda.js",
-            // },
-            // {
-            //   children: "eruda.init();console.log('eruda inited');",
-            // },
+            {
+              src: appBase + "libs/eruda/eruda.js",
+            },
+            {
+              children: "eruda.init();console.log('eruda inited');",
+            },
             {
               defer: true,
               src: appBase + "libs/katex/0.16.10/katex.min.js",
@@ -116,14 +131,19 @@ export default defineNuxtConfig({
 
   // 环境变量
   runtimeConfig: {
-    siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
-    siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
+    // siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanAuthToken: "",
+    // siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
+    siyuanCookie: "",
     public: {
-      defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE ?? "siyuan",
-      siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL ?? "http://127.0.0.1:6806",
-      waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
-      providerMode: process.env.NUXT_PUBLIC_PROVIDER_MODE ?? "false",
-      providerUrl: process.env.NUXT_PUBLIC_PROVIDER_URL ?? "http://127.0.0.1:8000",
+      // defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
+      defaultType: "siyuan",
+      // siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL,
+      siyuanApiUrl: "",
+      // waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
+      waitTime: "0",
+      providerMode: "false",
+      providerUrl: "http://127.0.0.1:8000",
     },
   },
 

diff --git a/pages/share.vue b/pages/share.vue
@@ -38,6 +38,7 @@ import { sendMessageToParent } from "~/utils/innerIframeEvent"
 import { getAllIps } from "~/utils/urlUtil"
 import { useStaticShare } from "~/composables/useStaticShare"
 import { useShareType } from "~/composables/useShareType"
+import { useStaticThemeMode } from "~/composables/useStaticThemeMode"
 
 definePageMeta({
   layout: "default",
@@ -53,6 +54,7 @@ const { blogApi, kernelApi } = useSiyuanApi()
 const { getShareType, isPrivateShare } = useShareType()
 const { updateShareType } = useCommonShareType()
 const { openStaticShare, closeStaticShare, updateStaticShare } = useStaticShare()
+const { colorMode, toggleDark } = await useStaticThemeMode()
 
 const id = useRouteQuery("id", "")
 const origin = useRouteQuery("origin", "")
@@ -103,7 +105,7 @@ const formData = reactive({
 const { optionState, optionToggle } = useShareOptionToggle(formData.optionEnabled)
 
 const goHelp = async () => {
-  window.open("https://blog.terwer.space/s/20230621001422-xsimx5v")
+  window.open("https://siyuan.wiki/s/20230621001422-xsimx5v")
 }
 
 const copyWebLink = () => {
@@ -350,6 +352,13 @@ const goSetting = () => {
             </el-icon>
             {{ t("share.setting") }}
           </el-text>
+
+          <el-text @click="toggleDark">
+            <el-icon>
+              <el-icon-coffee />
+            </el-icon>
+            {{ colorMode ? t("theme.mode.light") : t("theme.mode.dark") }}
+          </el-text>
         </el-space>
       </div>
     </div>