Vue3 与 Element-Plus 如何实现暗黑模式

在当今的网页设计中，暗黑模式因其独特的视觉效果和对眼睛的友好度，受到越来越多用户的喜爱。对于使用 Vue3 和 Element-Plus 构建的项目来说，实现暗黑模式能显著提升用户体验。那么，究竟该如何操作呢？

我们需要在项目中引入暗黑模式的样式文件。Element-Plus 提供了官方的暗黑模式 CSS 变量文件，我们可以通过 npm 或 yarn 进行安装，然后在入口文件（通常是 main.js）中引入。例如：

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.mount('#app');

接下来，我们要创建一个切换暗黑模式的逻辑。可以在组件中定义一个变量来存储暗黑模式的状态，然后通过一个方法来切换状态。比如在一个组件中：

<template>
  <el-switch v-model="isDarkMode" @change="toggleDarkMode"></el-switch>
</template>

<script setup>
import { ref } from 'vue';

const isDarkMode = ref(false);

const toggleDarkMode = () => {
  document.documentElement.classList.toggle('dark');
  isDarkMode.value =!isDarkMode.value;
};
</script>

这里通过 document.documentElement.classList.toggle('dark') 来切换暗黑模式的类名，Element-Plus 的暗黑模式样式是基于 CSS 变量和这个类名来生效的。

为了让暗黑模式的状态在页面刷新后依然保持，我们可以使用浏览器的本地存储。在切换状态时，将状态存储到本地存储，在组件挂载时读取本地存储的状态。示例代码如下：

<template>
  <el-switch v-model="isDarkMode" @change="toggleDarkMode"></el-switch>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isDarkMode = ref(false);

const toggleDarkMode = () => {
  document.documentElement.classList.toggle('dark');
  isDarkMode.value =!isDarkMode.value;
  localStorage.setItem('isDarkMode', isDarkMode.value);
};

onMounted(() => {
  const storedDarkMode = localStorage.getItem('isDarkMode');
  if (storedDarkMode === 'true') {
    document.documentElement.classList.add('dark');
    isDarkMode.value = true;
  }
});
</script>

通过以上步骤，我们就能在 Vue3 与 Element-Plus 的项目中轻松实现暗黑模式，为用户带来更加个性化的浏览体验。无论是追求炫酷的视觉效果，还是为了在夜间保护眼睛，暗黑模式都无疑是一个优秀的功能。