✨ Add options to follow dark mode of joe 3.0

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不兼容

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>
+            """;
+    }
 }

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: "*实验性 渲染媒体标签"