vue 切换主题色切换主题色切换主题色切换主题色切换主题色

在Vue中切换主题色通常涉及到根据用户的选择动态更改样式。以下是一个简单的例子，展示如何在Vue应用中实现主题色切换的功能：

1. 定义主题色变量。
2. 创建一个Vue组件来管理主题切换。
3. 使用本地存储来记住用户的选择。

<template>
  <div id="app">
    <button @click="toggleTheme">切换主题色</button>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  methods: {
    toggleTheme() {
      const currentTheme = localStorage.getItem('theme') === 'dark' ? 'light' : 'dark';
      localStorage.setItem('theme', currentTheme);
      document.body.classList.toggle('dark-theme', currentTheme === 'dark');
    }
  },
  mounted() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.body.classList.toggle('dark-theme', savedTheme === 'dark');
    }
  }
}
</script>
 
<style>
  :root {
    --primary-bg-color: #fff;
    --primary-text-color: #000;
  }
 
  .dark-theme {
    --primary-bg-color: #333;
    --primary-text-color: #fff;
  }
 
  body {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
  }
</style>

在这个例子中，我们定义了两套主题色（亮色和暗色），并使用CSS变量来引用这些主题色。切换主题的方法是在toggleTheme函数中通过改变body元素的classList来实现的。同时，我们使用了本地存储来记住用户的选择，并在组件挂载时应用这个选择。这样，即使用户刷新页面，主题设置也会被保留。