From fb218ac50babf89be84b25bd40d3c8f350f0cb1b Mon Sep 17 00:00:00 2001
From: zhengyi <admin@mczhengyi.top>
Date: Thu, 7 Dec 2023 17:29:22 +0800
Subject: [PATCH] :sparkles: Add options to follow dark mode of joe 3.0

---
 README.md                                     |  5 ++--
 .../mczhengyi/vditor/utils/ScriptUtils.java   | 30 +++++++++++++++++++
 src/main/resources/extensions/settings.yaml   |  2 ++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6ea59bc..e82164a 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@
 - 🚸 将设置拆分为编辑器和渲染两个部分
 - ✨ 为编辑器添加多国语言支持
 - ✨ 添加启用编辑器代码块的选项
+- ✨ 添加跟随Joe 3.0主题切换暗色模式的选项
 - 🐛 修复单页未对内容进行渲染的问题
 - 🐛 修复所见即所得模式下部分内容被小工具栏遮挡的问题 [issue by musnows](https://github.com/justice2001/halo-plugin-vditor/issues/2)
 
@@ -58,10 +59,10 @@
 - [x] 支持附件选取插入
 - [x] 支持暗色主题渲染
 - [ ] `🧪` 支持多媒体渲染
-- [ ] `💻` 拆分配置为编辑器配置与渲染配置两部分
+- [x] `💻` 拆分配置为编辑器配置与渲染配置两部分
 - [x] `💻` 添加多国语言支持 `手搓翻译函数实现`
 - [ ] `💻` 支持代码高亮及复制
-- [ ] `💻` 跟随主题的暗色模式(joe主题)
+- [x] `💻` 跟随主题的暗色模式(joe主题)
 - [ ] 将Vditor前台渲染资源全量引入本地
 - [ ] 添加配置是否使用CDN加载前台资源
 - [ ] `🐛` 内置渲染器与ToolBench不兼容
diff --git a/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java b/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
index f26b91e..95c6372 100644
--- a/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
+++ b/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
@@ -4,10 +4,40 @@ import top.mczhengyi.vditor.bean.RenderConfig;
 
 public class ScriptUtils {
     public static String renderScript(RenderConfig renderConfig) {
+        StringBuilder script = new StringBuilder();
+        script.append(basicScript(renderConfig));
+        // 如果是跟随Joe 3.0则注入脚本
+        if ("joe".equals(renderConfig.getDarkMode()))
+            script.append(joeDarkMode());
+        return script.toString();
+    }
+
+    public static String basicScript(RenderConfig renderConfig) {
         return """
                 <script src="/plugins/vditor-mde/assets/static/method.min.js"></script>
                 <script src="/plugins/vditor-mde/assets/static/render.js" id="render-script"
                   data-dark="%s" data-mediaRender="%s"></script>
                 """.formatted(renderConfig.getDarkMode(), renderConfig.getMediaRender());
     }
+
+    public static String joeDarkMode() {
+        return """
+            <script>
+            window.addEventListener("load", () => {
+                var html = document.getElementsByTagName("html")[0]
+                if (!html) return
+                setTheme(html.dataset.mode)
+                var callback = (mutation) => {
+                    if (mutation[0].attributeName=="data-mode") {
+                        console.log("CHANGED")
+                        var mode = mutation[0].target.dataset.mode
+                        setTheme(mode)
+                    }
+                }
+                var observer = new MutationObserver(callback)
+                observer.observe(html, {attributes:true})
+            })
+            </script>
+            """;
+    }
 }
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
index 9e1e80c..7aa7d85 100644
--- a/src/main/resources/extensions/settings.yaml
+++ b/src/main/resources/extensions/settings.yaml
@@ -47,6 +47,8 @@ spec:
                   value: disabled
                 - label: 跟随系统
                   value: system
+                - label: 跟随Joe 3.0
+                  value: joe
             - $formkit: checkbox
               name: mediaRender
               label: "*实验性 渲染媒体标签"