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

缘由

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

@import 语句详见 @import - CSS(层叠样式表) | MDN

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

具体实现

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

  2. 在原主题的 theme.csscustom.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 中对应的值

5 操作
shuoying 在 2022-01-13 22:02:18 更新了该帖
shuoying 在 2021-12-30 17:57:38 更新了该帖
shuoying 在 2021-12-29 20:24:42 更新了该帖
shuoying 在 2021-12-28 21:31:37 更新了该帖 shuoying 在 2021-12-28 12:29:56 更新了该帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • deerain
    支持者 订阅者