vue实现黑夜白天切换

实现黑夜/白天切换功能

在Vue中实现黑夜/白天切换功能，通常需要结合CSS变量和状态管理。以下是具体实现方法：

使用CSS变量定义主题

在全局CSS文件中定义白天和黑夜模式的变量：

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

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --primary-color: #5a9cf8;
}

创建主题切换组件

<template>
  <button @click="toggleTheme">
    {{ isDarkMode ? '白天模式' : '黑夜模式' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: false
    }
  },
  methods: {
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode
      if (this.isDarkMode) {
        document.documentElement.classList.add('dark-mode')
      } else {
        document.documentElement.classList.remove('dark-mode')
      }
      localStorage.setItem('darkMode', this.isDarkMode)
    }
  },
  mounted() {
    const savedMode = localStorage.getItem('darkMode') === 'true'
    if (savedMode) {
      this.isDarkMode = savedMode
      document.documentElement.classList.add('dark-mode')
    }
  }
}
</script>

在组件中使用CSS变量

在组件样式中使用定义的CSS变量：

<style scoped>
.container {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.button {
  background-color: var(--primary-color);
}
</style>

使用Vuex管理主题状态（可选）

如果需要全局状态管理，可以结合Vuex：

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

响应系统主题偏好

可以检测用户系统的主题偏好并自动切换：

mounted() {
  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  const updateDarkMode = (e) => {
    this.isDarkMode = e.matches
    if (e.matches) {
      document.documentElement.classList.add('dark-mode')
    } else {
      document.documentElement.classList.remove('dark-mode')
    }
  }
  darkModeMediaQuery.addListener(updateDarkMode)
  updateDarkMode(darkModeMediaQuery)
}

过渡动画效果

为切换过程添加平滑过渡：

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

这些方法可以根据项目需求组合使用，实现灵活的主题切换功能。