vue实现黑夜白天切换

Vue实现黑夜白天切换的方法

使用CSS变量和Vue响应式数据

通过Vue的响应式数据管理主题状态，结合CSS变量实现样式切换。在根元素定义CSS变量，通过类名或属性选择器切换主题。

<template>
  <div :class="{'dark-mode': isDark}">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

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

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

.dark-mode {
  --bg-color: #333333;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

使用Vuex管理主题状态

对于大型应用，建议使用Vuex集中管理主题状态，便于多组件共享。

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

// Component.vue
<template>
  <button @click="$store.commit('toggleTheme')">切换主题</button>
</template>

持久化存储主题偏好

结合localStorage保存用户选择的主题，实现持久化。

methods: {
  toggleTheme() {
    this.isDark = !this.isDark
    localStorage.setItem('darkMode', this.isDark)
  }
},
created() {
  const savedTheme = localStorage.getItem('darkMode')
  if (savedTheme) {
    this.isDark = savedTheme === 'true'
  }
}

使用第三方库

考虑使用现成的主题切换库如vue-dark-mode或vuetify的主题系统。

npm install vue-dark-mode

import VueDarkMode from 'vue-dark-mode'
Vue.use(VueDarkMode)

系统偏好检测

通过prefers-color-scheme媒体查询自动匹配用户系统主题设置。

created() {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    this.isDark = true
  }
}

过渡动画效果

为主题切换添加平滑的过渡效果，提升用户体验。

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}