Vue如何实现主题暗黑

Vue 实现暗黑主题的方法

使用 CSS 变量和类切换

在 Vue 项目中，可以通过 CSS 变量和动态类切换实现暗黑主题。在 App.vue 或全局样式文件中定义 CSS 变量，分别对应亮色和暗色主题的配色方案。通过 Vue 的响应式数据控制主题切换。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

在 Vue 组件中，使用 v-bind:class 动态切换主题类：

<template>
  <div :class="{ 'dark-theme': isDark }">
    <!-- 页面内容 -->
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false
    };
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark;
    }
  }
};
</script>

使用 Vue 插件（如 vue-dark-mode）

对于更复杂的主题需求，可以使用现成的 Vue 插件，例如 vue-dark-mode。安装插件后，在项目中配置主题切换逻辑。

npm install vue-dark-mode

在 main.js 中引入并注册插件：

import Vue from 'vue';
import DarkMode from 'vue-dark-mode';

Vue.use(DarkMode);

在组件中使用插件提供的功能：

<template>
  <div>
    <button @click="$darkMode.toggle">切换主题</button>
  </div>
</template>

结合 localStorage 持久化主题状态

为了在页面刷新后保持主题状态，可以将主题偏好保存到 localStorage。在 Vue 的 created 或 mounted 钩子中读取存储的主题状态。

export default {
  data() {
    return {
      isDark: localStorage.getItem('theme') === 'dark'
    };
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark;
      localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
    }
  }
};

使用 CSS 预处理器（如 SCSS）

如果项目使用 SCSS，可以通过变量和混合（mixin）简化主题管理。定义主题变量文件 _themes.scss：

$themes: (
  light: (
    bg-color: #ffffff,
    text-color: #333333
  ),
  dark: (
    bg-color: #1a1a1a,
    text-color: #f0f0f0
  )
);

在组件中通过 SCSS 函数动态应用主题：

@import 'themes';

body {
  @include themeify {
    background-color: themed('bg-color');
    color: themed('text-color');
  }
}

结合 Vuex 管理全局主题状态

对于大型项目，可以使用 Vuex 集中管理主题状态。在 Vuex store 中定义主题模块：

const store = new Vuex.Store({
  state: {
    isDark: false
  },
  mutations: {
    toggleTheme(state) {
      state.isDark = !state.isDark;
    }
  }
});

在组件中通过 mapState 和 mapMutations 使用：

<template>
  <button @click="toggleTheme">切换主题</button>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['isDark'])
  },
  methods: {
    ...mapMutations(['toggleTheme'])
  }
};
</script>