在ListMonk中为TinyMCE编辑器添加暗黑模式支持

ListMonk是一个开源的邮件列表和通讯管理系统，它使用TinyMCE作为默认的富文本编辑器。随着暗黑模式在现代Web应用中的普及，许多用户希望为TinyMCE编辑器也添加这一功能。

暗黑模式实现方案

为TinyMCE添加暗黑模式支持主要涉及两个层面的修改：

1. 编辑器界面样式：包括工具栏、菜单等UI元素
2. 编辑区域内容样式：即实际编辑的邮件内容预览

CSS解决方案

通过CSS媒体查询可以检测用户系统的颜色偏好，并应用相应的暗色样式：

@media (prefers-color-scheme: dark) {
  .tox-tinymce {
    border: 1px solid rgba(71, 71, 71, 0.15) !important;
  }
  
  .tox-tinymce,
  .tox-editor-container,
  .tox-editor-header {
    filter: invert(100%);
  }
  
  .tox-edit-area__iframe {
    background-color: transparent !important;
  }
}

这里使用了filter: invert(100%)来快速反转编辑器UI的颜色，这是一种简单但有效的暗黑模式实现方式。

JavaScript增强

为了确保编辑区域内容也能正确显示暗黑模式，需要通过JavaScript动态修改iframe内的样式：

function applyDarkModeToEditor() {
  const iframe = document.getElementById(editorId + "_ifr");
  const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  
  const style = iframeDocument.createElement("style");
  style.type = "text/css";
  
  const darkModeCSS = `
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #232323;
        color: #fff;
      }
      a {
        color: #4099ff;
      }
    }
  `;
  
  style.appendChild(iframeDocument.createTextNode(darkModeCSS));
  iframeDocument.head.appendChild(style);
}

实现细节优化

在实际应用中，还需要考虑以下细节：

1. 加载时机处理：由于TinyMCE是动态加载的，需要使用定时器或事件监听确保在编辑器完全加载后再应用样式
2. 性能优化：避免重复应用样式，可以使用数组记录已处理的编辑器实例
3. 过渡效果：添加opacity过渡使暗黑模式切换更平滑

.tox-tinymce {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tox-tinymce.show {
  opacity: 1.0;
}

总结

通过结合CSS媒体查询和JavaScript动态样式注入，我们可以为ListMonk中的TinyMCE编辑器实现完整的暗黑模式支持。这种方法不仅保持了与系统主题的一致性，还确保了编辑体验的连贯性。对于追求更精细控制的用户，还可以考虑直接使用TinyMCE提供的皮肤API来创建完全自定义的暗色主题。