基于css变量轻松实现网站的主题切换功能

我们经常看到一些网站都有主题切换，例如vue官方文档。那他是怎么实现的呢？

在这里插入图片描述

检查元素，发现点击切换时，html元素会动态的添加和移除一个class:dark，然后页面主题色就变了。仔细想想，这要是放在以前，可能要写两套样式，就像这样：

body {background-color: '#fff';
}
body.dark {background-color: '#000';
}

这写起来得多麻烦啊，而且难以维护。

好在我们有CSS变量，早在2017年，微软宣布Edge浏览器将支持CSS变量，现在几乎所有的浏览器都已经支持了这个功能。（IE：啊这？）

css变量也是变量，就像js一样，先声明，再读取。

body {--text-color: red;
}
.box {color: var(--text-color);
}

已经出来很多年了，今天就不详细介绍了，有兴趣的推荐阅读阮一峰老师的《CSS 变量教程》

今天就用vue3项目来写一个基于css变量实现的主题切换demo。

创建一个vue3项目：

npm create vue@latest

创建一个theme.css文件。

/***默认主题*/
:root {--bg: #fff;--text-color: #000;
}
/***添加属性，用来控制暗黑模式时的样式*/
html[data-theme="dark"] {--bg: #000;--text-color: #fff;
}

或者像vue文档中一样使用class，如下所示：

:root {--bg: #fff;--text-color: #000;
}
html.dark {--bg: #000;--text-color: #fff;
}

但是如果某个页面内无意中野使用到同名dark这个class，可能会造成影响，我这里还是用属性。

在main.js中引入一下theme.css。

import './assets/theme.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

在App.vue style中调用一下变量，并动态改变data-theme的值：

<template><main><p>主题切换demo</p><button @click="change">切换</button></main>
</template>
<script>let theme = 'light'const change = () => {theme = theme === 'light' ? 'dark' : 'light'document.documentElement.setAttribute('data-theme', theme)}
</script><style scoped>
main {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: var(--bg);color: var(--text-color);
}
p {margin: 20px 0;
}
</style>

看看效果：

在这里插入图片描述

功能基本上已经实现了，再来把这个切换操作封装成一个组件，并全局实时共享主题数据。

创建一个useTheme.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的值：

<template><el-switch v-model="theme":active-action-icon="Moon":inactive-action-icon="Sunny"active-color="#2f2f2f"active-value="dark"inactive-value="light"@change="changeDark"></el-switch>
</template><script setup>import { Sunny, Moon } from '@element-plus/icons-vue'import useTheme from '../hooks/useTheme'const { theme } = useTheme()const changeDark = (data) => {theme.value === data}
</script>

改一下App.vue文件，引入并使用ThemeSwitch组件和useTheme Hook：

<template><main><p>主题切换demo</p><ThemeSwitch></ThemeSwitch><p>当前主题：{{theme}}</p></main>
</template><script setup>import ThemeSwitch from './components/theme-switch.vue'import useTheme from './hooks/useTheme'const { theme } = useTheme()
</script><style scoped>
main {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: var(--bg);color: var(--text-color);
}
p {margin: 20px 0;
}
</style>

再看看效果：

在这里插入图片描述

现在由一个专门的组件用来控制切换主题，并且不同组件内也都能共享theme变量了。

最后再优化一下，目前默认是亮色，切换到暗色以后再刷新页面，又会回到亮色，可以把theme变量存到localstorage。

修改一下useTheme.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}
}