在Vue 2项目中实现一个暗黑模式的切换，可以通过更改CSS变量来实现页面级别的主题切换。以下是一个简单的示例：
- 在
App.vue或全局样式文件中定义默认的明亮和暗黑主题样式变量。
/* 明亮主题样式 */
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
/* 暗黑主题样式 */
.dark-mode {
--bg-color: #000000;
--text-color: #ffffff;
}- 使用这些CSS变量来设置元素的样式。
body {
background-color: var(--bg-color);
color: var(--text-color);
}- 在Vue组件中添加一个方法来切换暗黑模式。
// 在Vue组件的methods中
methods: {
toggleDarkMode() {
this.$el.classList.toggle('dark-mode');
}
}- 在组件的模板中添加一个按钮来触发切换。
<template>
<div>
<button @click="toggleDarkMode">切换暗黑模式</button>
</div>
</template>- 在组件的
mounted钩子中，如果用户的偏好设置是暗黑模式，可以自动应用暗黑模式。
mounted() {
if (localStorage.getItem('dark-mode') === 'true') {
this.toggleDarkMode();
}
}- 当用户切换模式时，更新本地存储以记住用户的选择。
methods: {
toggleDarkMode() {
const isDarkMode = this.$el.classList.toggle('dark-mode');
localStorage.setItem('dark-mode', isDarkMode.toString());
}
}这样就实现了一个基本的暗黑模式切换功能。用户可以通过点击按钮来手动切换主题，切换后的选择将会被保存在localStorage中，在用户下次访问时会记住其偏好设置。