如何在Vue项目中使用VueUse实现Dark Mode？

terry 21小时前阅读数 13 #Vue

文章标签 Dark Mode

在如今的网页设计中，Dark Mode（暗黑模式）越来越受到用户的喜爱，它不仅能在夜间减少眼睛疲劳，还能为界面带来独特的视觉风格，而VueUse是一个非常实用的Vue工具库，其中包含了许多有用的功能，今天我们就来探讨一下如何利用VueUse在Vue项目中轻松实现Dark Mode。

VueUse是什么？

VueUse是一个集合了大量实用的组合式函数（Composition Functions）的库，这些函数可以帮助开发者更便捷地处理各种常见的开发任务，比如响应式数据处理、浏览器API的封装使用等，它与Vue 3的组合式API（Composition API）完美契合，能让我们的代码更加简洁、高效。

准备工作

创建Vue项目

你需要有一个Vue项目，如果还没有，可以使用Vue CLI或者Vite来创建，这里以Vite为例,在命令行中输入：

```bash npm create vite@latest my-vue-app -- --template vue cd my-vue-app npm install ``` ### 2. 安装VueUse

在项目目录下,通过npm或者yarn安装VueUse：

```bash npm install @vueuse/core # 或者 yarn add @vueuse/core ```

实现Dark Mode的步骤

导入相关函数

在需要使用Dark Mode的组件中,导入VueUse提供的`useDark`函数：

```javascript import { useDark } from '@vueuse/core' ``` ### 2. 响应式数据绑定

在组件的`setup`函数中，使用`useDark`函数来创建一个响应式的变量，用于表示当前的主题模式（Light或Dark）：

```javascript export default { setup() { const isDark = useDark() return { isDark } } } ```

这样，`isDark`就是一个响应式的布尔值，当用户的系统主题设置为Dark Mode时，它会自动变为`true`,反之则为`false`。

### 3. 切换主题的方法

除了获取当前的主题状态，我们还可以提供一个方法来手动切换主题,VueUse的`useDark`函数还返回了一个`toggle`方法：

```javascript export default { setup() { const isDark = useDark() const toggleDarkMode = () => { isDark.toggle() } return { isDark, toggleDarkMode } } } ```

在模板中,我们可以通过按钮等元素来调用这个`toggleDarkMode`方法：

```html ``` ### 4. 样式处理

接下来是样式部分，我们可以根据`isDark`的值来应用不同的CSS样式,一种常见的做法是在全局CSS中定义两个主题样式：

```css /* 浅色主题 */ :root { --background-color: #ffffff; --text-color: #000000; }

/ 深色主题 / .dark { --background-color: #000000; --text-color: #ffffff; }

<p>然后在组件的模板中，根据`isDark`的值来动态添加`dark`类：</p>
```html
<template>
  <div :class="{ dark: isDark }">
    <!-- 页面内容 -->
  </div>
</template>

这样，当`isDark`为`true`时，`dark`类就会被添加到`div`元素上,从而应用深色主题的样式。

进阶应用

持久化主题设置

我们希望用户切换的主题设置能够在页面刷新或者下次访问时依然保持，这时候可以结合`localStorage`来实现,修改`setup`函数：

```javascript export default { setup() { const isDark = useDark({ // 存储键名 storageKey: 'theme-mode', // 初始值（如果localStorage中没有存储） initialValue: false }) const toggleDarkMode = () => { isDark.toggle() } return { isDark, toggleDarkMode } } } ```

这样，`useDark`函数会自动将主题状态存储到`localStorage`中，键名为`theme-mode`。

### 2. 与其他组件库集成

如果你的项目中使用了像Element Plus、Ant Design Vue等组件库，它们通常也提供了对Dark Mode的支持，以Element Plus为例，在安装了`@element-plus/theme-chalk-dark`后,我们可以根据`isDark`的值来动态引入相应的样式：

```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // 导入深色样式 import 'element-plus/theme-chalk-dark/css-vars.css'

const app = createApp(App)

app.use(ElementPlus)

// 在App.vue的setup中 import { useDark } from '@vueuse/core'

export default { setup() { const isDark = useDark() // 监听isDark的变化，动态切换Element Plus的主题 isDark.watch((newValue) => { if (newValue) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } }) return { isDark } } }

<p>这样，Element Plus的组件样式就会随着主题的切换而变化。</p>
## 五、注意事项
### 1. 浏览器兼容性
<p>虽然`useDark`函数已经做了一些兼容性处理，但在一些老旧的浏览器上可能还需要额外的polyfill，可以通过检查浏览器是否支持`matchMedia` API来进行降级处理：</p>
```javascript
if (typeof window !== 'undefined' && window.matchMedia) {
  // 使用useDark函数
} else {
  // 提供默认的主题设置（比如浅色）
}