当前位置：首页 > VUE

vue实现黑夜主题

2026-02-20 14:13:27VUE

使用 CSS 变量实现主题切换

在 Vue 项目中，可以通过 CSS 变量动态切换主题。定义两套颜色变量，分别对应白天和黑夜主题。

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

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --primary-color: #5a9cf8;
}

在 Vue 组件中通过修改 document.documentElement 的 dataset 来切换主题。

methods: {
  toggleTheme() {
    const currentTheme = document.documentElement.dataset.theme;
    document.documentElement.dataset.theme = currentTheme === 'dark' ? '' : 'dark';
  }
}

使用 Vuex 管理主题状态

在大型项目中，可以使用 Vuex 集中管理主题状态。

// store.js
export default new Vuex.Store({
  state: {
    darkMode: false
  },
  mutations: {
    toggleDarkMode(state) {
      state.darkMode = !state.darkMode
    }
  }
})

在组件中通过计算属性和方法访问和修改主题状态。

computed: {
  isDarkMode() {
    return this.$store.state.darkMode
  }
},
methods: {
  toggleTheme() {
    this.$store.commit('toggleDarkMode')
    document.documentElement.dataset.theme = this.isDarkMode ? 'dark' : ''
  }
}

使用第三方库

对于更复杂的主题需求，可以考虑使用专门的 UI 库或主题管理库。

Element UI 主题切换示例：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/dark/css-vars.css'

// 切换主题
document.body.classList.toggle('dark')

Vuetify 主题切换示例：

// vuetify.js
export default new Vuetify({
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#1976D2'
      },
      dark: {
        primary: '#2196F3'
      }
    }
  }
})

// 组件中切换
this.$vuetify.theme.dark = !this.$vuetify.theme.dark

持久化主题选择

为了记住用户的选择，可以使用 localStorage 持久化主题设置。

// 保存主题
localStorage.setItem('theme', 'dark')

// 初始化时读取
const savedTheme = localStorage.getItem('theme')
if (savedTheme) {
  document.documentElement.dataset.theme = savedTheme
  this.$store.commit('setDarkMode', savedTheme === 'dark')
}

响应系统主题变化

可以通过媒体查询监听系统主题变化，自动切换应用主题。

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
darkModeMediaQuery.addListener((e) => {
  const darkMode = e.matches
  this.$store.commit('setDarkMode', darkMode)
  document.documentElement.dataset.theme = darkMode ? 'dark' : ''
})

vue实现黑夜主题