教你代码块主题如何在明亮模式下使用暗黑模式下的主题

起因

因为是从别的笔记软件转移过来的,导致看代码块的内容看起来很难受,找了半天后发现暗黑模式下的有一些代码块看起来比较顺眼,就发布了帖子想求助大佬帮帮忙,看有没有能有解决的办法。“代码块主题如何让暗黑模式下某个主题可以在明亮模式下使用”好像大家对于这块的需求不高,没法,自己研究了一下。
大概能实现我所需要的效果。

注意事项

注意!如果主题不做好备份可能就会导致主题无了!!!!!
注意!如果主题不做好备份可能就会导致主题无了!!!!!
注意!如果主题不做好备份可能就会导致主题无了!!!!!
这样改的配置无法同步效果,其他端也要这样修改主题,但是 app 端不受影响

效果

image.png

步骤 1:

找到本机的主题文件:E:\Program Files\SiYuan\resources\stage\protyle\js\highlight.js\styles

image.png

看起来是没有区分明亮和暗黑

步骤 2:

a11y-light.min.css 是明亮主题,也是我要替换的主题,先拷贝一份出来(防止丢失),然后打开 a11y-dark.min.cssa11y-light.min.css 文本工具就可以打开了image.png

全选 a11y-dark.min.css 里面的内容,替换掉 a11y-light.min.css 里面的内容,保存!

步骤 3:

进入思源笔记,设置-外观-代码片段,添加下面代码

.protyle-wysiwyg div.code-block[data-node-id] {
    background-color:#2b2b2b;
}

确定

代码主题中,明亮模式下代码块语法高亮主题选择刚才我们替换了内容的主题:

image.png

最后

重启软件,就可以发现代码块已经变了!

借鉴帖子

【已解决】CSS 代码片段修改:长代码块、嵌入块与表格块添加滚动条

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    19135 引用 • 71939 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...