前言

现在的前端花活越来越多，但用户体验也越来越好，由于我经常写代码，代码编辑器的主题通常是 暗色系，之前开发个人博客时，总觉得亮色有点闪眼睛，就加了个主题切换的功能，可以随意切换亮色主题，或暗色主题。如果拓展开来，就可以适配节日，比如国庆节红色主题，伟人去世变灰色。

思路

这里分享一下我的思路：

1. 首先，主题 不同意味着颜色不同，所以我们需要动态的改变颜色值就可以了，在 css 中我们可以通过 var 函数读取变量，当我们的 var函数 读取一个颜色变量赋值给颜色属性时，当这个颜色值改变，对应元素的颜色也就发生改变了。

div{
  background-color:var();
}

1. 然后我们定义一个颜色变量，在 css 中变量是以 -- 开头的，同时也是有 作用域 的。

这里我们定义了一个 --primary-color 的颜色变量，定义在 :root 下，所以它的作用域范围就在 :root 下，而 :root 指的就是我们的根元素，所以，就设置为了全局变量。

:root{
  --primary-color:#0099ff;
}

这里我们为 --primary-color 作用在 class 为 default-theme 的元素下。

.default-theme{
  --primary-color:#0099ff;
}

1. 接下来，我们在 1 中将使用这个变量。

div{
  background-color:var(--primary-color);
}

这个时候当 --primary-color 的值发生改变，div 的背景色也就随之改变，那么，如何让 --primary-color 的值发生改变呢？

1. 我们可以定义第二套主题，假设作用在 dark-theme 的 class 下。

.dark-theme{
  --primary-color:#1e1e20;
}

这样子思路是不是就有了，只要我们切换了主题的作用域范围就达成了切换主题的效果，而作用域范围是由 default-theme 和 dark-theme 两个 class 来决定的，所以我们只需要动态绑定不同的 class 就可以了。

当我们有更多主题时，配置多个 css 作用域就可以了。

当然我们还可以使用 javasccript 对象配合 nodejs 来生成 css 文件，更多的玩法，大家一起探索！

补充

最后再说一点，如果想要实现网页变灰，不用这么麻烦，直接一个 css 属性即可:

body{
  filter:grayscale(1);
}

这里是MDN的解释

结语

css 还是比较神奇的并且好玩的，之前学习 react 时写过一个主题生成器的 demo ,链接发出来供大家使用 webxue。

我是webxue，一名前端程序员，但不止于前端，如果文章内容能帮助到你，非常有幸，一起学习一起进步~，最后，非常感谢你能看到此处！