添加自动暗黑模式 18 以后 6点以前

siyuan-note · Dec 20, 2023 · 055a20d · 055a20d
1 parent eb3f477
commit 055a20d
Showing 1 changed file with 32 additions and 23 deletions.
diff --git a/apps/frontend/src/core/htmlTemplate.ts b/apps/frontend/src/core/htmlTemplate.ts
@@ -1,41 +1,48 @@
 export async function htmlTemplate(
   p: { htmlContent: string; title: string; level: number },
   config?: {
-    siyuanPrefix: string;
-    embedCode?: { head?: string; beforeBody?: string; afterBody?: string };
+    siyuanPrefix: string
+    embedCode?: { head?: string; beforeBody?: string; afterBody?: string }
   },
 ) {
   /** 根据level有几级返回多少个 '../' ,用于解决 file协议打开html文档无法正常加载资源 */
-  let prePath = "";
+  let prePath = ''
   if (config?.siyuanPrefix) {
-    prePath = config.siyuanPrefix;
+    prePath = config.siyuanPrefix
   } else {
     for (let i = 0; i < p.level; i++) {
-      prePath += "../";
+      prePath += '../'
     }
   }
-  const version = "2.10.5";
+  const version = '2.10.5'
+  /** 思源中导出 html 代码： https://github1s.com/siyuan-note/siyuan/blob/HEAD/app/src/protyle/export/index.ts#L652 */
   //data-theme-mode="dark" data-light-theme="daylight" data-dark-theme="midnight"
   return `<!DOCTYPE html>
 <html lang="zh_CN" data-theme-mode="light" data-light-theme="daylight" data-dark-theme="midnight">
 <head>
-  ${config?.embedCode?.head ?? ""}
+  ${config?.embedCode?.head ?? ''}
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <link rel="stylesheet" type="text/css" id="baseStyle" href="${prePath}stage/build/export/base.css?${version}"/>
-  <link rel="stylesheet" type="text/css" id="themeDefaultStyle" href="${prePath}appearance/themes/daylight/theme.css?${version}"/>
+  <script>
+  function isNightTime() {
+    return true
+    const currentHour = new Date().getHours();
+    return currentHour >= 18 || currentHour < 6;
+  }
+  document.write('<link rel="stylesheet" type="text/css" id="themeDefaultStyle" href="${prePath}appearance/themes/'+(isNightTime()?'midnight':'daylight')+'/theme.css?${version}"/>');
+  </script>
   <link rel="stylesheet" type="text/css" href="${prePath}appearance/oceanpress.css"/>
-
   <title>${p.title}</title>
 </head>
 <body>
-  ${config?.embedCode?.beforeBody ?? ""}
+  ${config?.embedCode?.beforeBody ?? ''}
   <div class="protyle-wysiwyg protyle-wysiwyg--attr" id="preview">
-    ${p.htmlContent}
+  ${p.htmlContent}
   </div>
   <script src="${prePath}appearance/icons/material/icon.js?${version}"></script>
   <script src="${prePath}stage/build/export/protyle-method.js?${version}"></script>
@@ -44,7 +51,7 @@ export async function htmlTemplate(
     window.siyuan = {
       config: {
         appearance: {
-          mode: 0,
+          mode: isNightTime()?1:0,//主题 明亮=0 暗黑=1
           codeBlockThemeDark: "base16/dracula",
           codeBlockThemeLight: "github",
         },
@@ -58,17 +65,19 @@ export async function htmlTemplate(
       },
       languages: { copy: "复制" },
     };
+    const cdn = "${prePath}stage/protyle";
     const previewElement = document.getElementById("preview");
-    Protyle.highlightRender(previewElement, "${prePath}stage/protyle");
-    Protyle.mathRender(previewElement, "${prePath}stage/protyle", false);
-    Protyle.mermaidRender(previewElement, "${prePath}stage/protyle");
-    Protyle.flowchartRender(previewElement, "${prePath}stage/protyle");
-    Protyle.graphvizRender(previewElement, "${prePath}stage/protyle");
-    Protyle.chartRender(previewElement, "${prePath}stage/protyle");
-    Protyle.mindmapRender(previewElement, "${prePath}stage/protyle");
-    Protyle.abcRender(previewElement, "${prePath}stage/protyle");
+
+    Protyle.highlightRender(previewElement, cdn);
+    Protyle.mathRender(previewElement, cdn, false);
+    Protyle.mermaidRender(previewElement, cdn);
+    Protyle.flowchartRender(previewElement, cdn);
+    Protyle.graphvizRender(previewElement, cdn);
+    Protyle.chartRender(previewElement, cdn);
+    Protyle.mindmapRender(previewElement, cdn);
+    Protyle.abcRender(previewElement, cdn);
     Protyle.htmlRender(previewElement);
-    Protyle.plantumlRender(previewElement, "${prePath}stage/protyle");
+    Protyle.plantumlRender(previewElement, cdn);
     document.querySelectorAll(".protyle-action__copy").forEach((item) => {
       item.addEventListener("click", (event) => {
         navigator.clipboard.writeText(
@@ -79,7 +88,7 @@ export async function htmlTemplate(
       });
     });
   </script>
-  ${config?.embedCode?.afterBody ?? ""}
+  ${config?.embedCode?.afterBody ?? ''}
 </body>
-</html>`;
+</html>`
 }