关于自定义代码配色

[berrylium0078]

我自己实验了一下，拿 catppuccin 做了一个支持日夜模式的代码块配色（highlight.js）：https://gist.github.com/berrylium0078/10382e0442390d6b79d757a3661aed2c

想问一下各位大佬，

1. 这个基于 [data-theme="dark"] 的方法合不合法，要不要收录到文档里？
2. 可不可以给代码块突出显示特定行的背景色加个配置项（我的代码中是 --hl-mark，本主题源代码中应该对应的是 $highlight-selection）？目前的我的实现是通过 !important 强制覆盖。

[dosubot[bot]]

Hi @berrylium0078! I'm Dosu and I’m helping the hexo-theme-butterfly team.

你的 [data-theme="dark"] 方法是完全合法的，Butterfly 主题本身就是通过这个选择器来实现日夜模式切换和代码块配色的，这也是官方推荐的做法，已经有不少组件（比如 note）都用这种方式适配深色模式，完全可以收录进文档作为自定义配色的参考方案。参考

关于代码块高亮行背景色，目前 Butterfly 主题用的是 SCSS 变量 $highlight-selection 控制，但没有直接暴露成配置项（比如 _config.yml 里设置），只能通过自定义 CSS 或覆盖 SCSS 变量来实现。如果你用 CSS 变量（比如 --hl-mark）或者直接覆盖 .line-highlight 的背景色，也是可行的，只是 !important 这种写法属于无奈之举，建议优先提升选择器优先级或直接覆盖变量。参考

如果希望未来能通过配置项自定义高亮行背景色，需要主题作者增加相关配置支持，目前只能通过自定义样式实现。你现在的做法是主流方案之一。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[berrylium0078]

效果展示：