网站主题，之前一直考虑的是通过替换css文件来实现，这种方式虽然可以，但不够方便。毕竟要写两套css主题，需要花费足够多的时间来适配。 后来琢磨出了一点东西出来，发现通过修改root里的css变量来实现，比较优雅，且将变量统一放在了root里管理，后期能够更加方便维护。 所以核心方法就是使用css变量，修改根节点的属性来实现：

/** * 用于修改根节点样式属性值 比如setCssVar('--theme-color', '#fff') * @param prop dom属性 * @param val 需要修改的属性值 * @param dom 默认为根节点 */ export const setCssVar = (prop: string, val: string, dom = document.documentElement) => { dom.style.setProperty(prop, val) }

这个方法主要用来修改root里的css变量

而根节点的root 则放置一些默认样式变量进来

:root { --theme-color: #F56C6C; --theme-font-color: #303133; --font-size: 12px; --background-color: transparent; }

现在原生css都支持变量了！ 想要使用css变量，直接通过var来使用，非常方便。比如： 好了，现在通过setCssVar即可修改root属性

最后插一嘴，一个非常简单的css3属性来实现全局的暗黑模式： 主角： mix-blend-mode mix-blend-mode有多个值，当为difference时，将会渲染成当前背景颜色完全相反的状态； 比如在某乎 我在根节点设置了该属性 可以看到整个背景颜色完全取反了，缺点也很明显，图片这种变的完全诡异了起来。所以需要给图片也设置mix-blend-mode为difference 就是取反再取反，回到最初的状态。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。