[思源笔记主题同步] 分享一个同步自定义主题的方案

缘由

由于思源笔记的主题放在 conf\appearance\themes 目录中, 因此如果更改了主题的 theme.css 或 custom.css 在使用官方同步服务时无法同步到其他设备, 这在不方便访问文件系统的终端(例如移动端, Docker 服务端)不易应用自定义主题, 因此我想出了用过 CSS 的 @import 语句引用 data\widgets 目录下的文件的配置方案

@import 语句详见 @import - CSS（层叠样式表） | MDN

思源笔记内核提供静态 Web 文件服务的目录, 笔记内部访问无需输入 http://host:port

• conf\appearance: 可以通过 http://host:port/appearance 访问(无限制)
• data\widgets: 可以通过 http://host:port/widgets 访问(无限制)
• data\emojis: 可以通过 http://host:port/emojis 访问(无限制)
• data\assets: 可以通过 http://host:port/assets 访问(设置访问授权码后需要 cookie)

具体实现

1. 在 data\widgets\ 目录下新建一个 file-name.css 文件

2. 在原主题的 theme.css 或 custom.css 文件首插入如下语句

   /* 自定义配置 */
   @import url(/widgets/file-name.css);
   

3. 在文件 data\widgets\file-name.css 中添加你的自定义主题配置

4. 在 开发者工具 的控制台中使用命令 window.location.reload() 重新加载页面

注: 在主题 Dark+ 的 v0.1.3 版本中已经加入该功能, 同时在 data\widgets\custom.css 文件 :root 中定义的值将覆盖 conf\appearance\themes\Dark+\style\module\config.css 中对应的值