.dark-theme {
background-color: #000;
color: white;
}.dark-theme *:not(a) {
background-color: #000 !important;
color: #fff !important;
border-color: #999 !important;
}
这种方式虽为简单粗暴，但有些细节需要额外处理，特别是代码中也有使用
!important 的样式时，会较为头痛。另外对于其他涉及到颜色的元素有可能需要额外处理。准备两套样式
在我个人的印象之中，最早实现类似的效果，一般都是通过JavaScript来更换Web页面或Web应用程序主题皮肤的
.css 文件：
正如上图所示，提供了两个CSS文件，一个是
theme1.css ，另一个是
theme2.css ，同时提供用户可切换的入口，当用户选择对应的主题之后，Web页面或Web应用程序就会切换到相应的
.css ，从而看到的就是对应的主题肤色效果。假设Web页面默认的主题风格是运用的
theme1.css ：
<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />在代码中提供一个简单的脚本函数：
document.getElementById('buttonID').addEventListener('click', function(){
document.getElementById('theme_css').href = '../theme2.css';
})回到我们主题中来，如果你需要黑暗模式和高亮模式之间的切换，那可以按类似的原理，分别提供
dark.css 和
light.css 。对于维护多套样式是较为痛苦的，特别当你要为你的产品提供更多的皮肤的时候更为堪忧。这个时候你可以借助类似Sass这样的处理器来维护你的主题样式，声明好变量，然后维护对应的变量值， 好比Bootstrap主题的构建一样，他就使用了Sass的变量 ：
有关于Sass来管理多套皮肤相关的知识已超出本文要探讨的范围，如果你对这方面知识感兴趣的话，可以阅读下面文章：
Organizing Multiple Theme Styles with Sass
总结
以上所述是小编给大家介绍的使用CSS实现黑暗模式和高亮模式的切换功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家！
