我们经常看到一些网站都有主题切换，例如vue官方文档。那他是怎么实现的呢？ ![test1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fef26d761564f7e925b3c2f91d6078a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2858&h=1486&s=4108493&e=gif&f=155&b=faf9fd) 检查元素，发现点击切换时，`html`元素会动态的添加和移除一个`class:dark`，然后页面主题色就变了。仔细想想，这要是放在以前，可能要写两套样式，就像这样： ```css body { background-color: '#fff'; } body.dark { background-color: '#000'; } ``` 这写起来得多麻烦啊，而且难以维护。好在我们有**CSS变量**，早在2017年，微软宣布Edge浏览器将支持CSS变量，现在*几乎所有*的浏览器都已经支持了这个功能。（IE：啊这？） css变量也是变量，就像js一样，先声明，再读取。 ```css body { --text-color: red; } .box { color: var(--text-color); } ``` 已经出来很多年了，今天就不详细介绍了，有兴趣的推荐阅读阮一峰老师的[《CSS 变量教程》](https://www.ruanyifeng.com/blog/2017/05/css-variables.html "《CSS 变量教程》") 今天就用vue3项目来写一个基于**css变量**实现的主题切换demo。创建一个vue3项目： ``` npm create vue@latest ``` 创建一个`theme.css`文件。 ```css /** *默认主题 */ :root { --bg: #fff; --text-color: #000; } /** *添加属性，用来控制暗黑模式时的样式 */ html[data-theme="dark"] { --bg: #000; --text-color: #fff; } ``` 或者像vue文档中一样使用class，如下所示： ```css :root { --bg: #fff; --text-color: #000; } html.dark { --bg: #000; --text-color: #fff; } ``` 但是如果某个页面内无意中野使用到同名dark这个class，可能会造成影响，我这里还是用属性。在`main.js`中引入一下`theme.css`。 ```js import './assets/theme.css' import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` 在`App.vue style`中调用一下变量，并动态改变`data-theme`的值： ```html ``` 看看效果： ![test2.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56f2193e39494551bc0af13ac14b77e8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2858&h=1486&s=1072041&e=gif&f=145&b=fcfbfe) 功能基本上已经实现了，再来把这个切换操作封装成一个组件，并全局实时共享主题数据。创建一个`useTheme.js`，用来执行设置属性的操作： ```js import { ref, watchEffect } from 'vue' // 默认用亮色 const theme = ref('light') // 每次改变都设置一下 watchEffect(() => { document.documentElement.setAttribute('data-theme', theme.value) }) export default function useTheme() { return { theme } } ``` 创建一个`switch-theme.vue`组件，仅仅用来改变`theme`的值： ```html ``` 改一下`App.vue`文件，引入并使用`ThemeSwitch`组件和`useTheme` Hook： ```html ``` 再看看效果： ![test3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/124d3f3ed92140379470e0bccd14baaa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2858&h=1486&s=1461281&e=gif&f=177&b=fcfbfe) 现在由一个专门的组件用来控制切换主题，并且不同组件内也都能共享`theme`变量了。最后再优化一下，目前默认是亮色，切换到暗色以后再刷新页面，又会回到亮色，可以把`theme`变量存到`localstorage`。修改一下`useTheme.js`: ```js import { ref, watchEffect } from 'vue' // 从取缓存中取值，给个默认值。 const theme = ref(localStorage.getItem('theme') || 'light') // 每次改变都设置一下属性，并存到缓存中。 watchEffect(() => { document.documentElement.setAttribute('data-theme', theme.value) localStorage.setItem('theme', theme.value) }) export default function useTheme() { return { theme } } ``` 全部代码见[Github](https://github.com/xintianyou/vue3-theme-switch-demo)