vue2 + elementUI + scss 制作主题切换+动画效果

<template>
  <el-button @click="toggleTheme">切换主题</el-button>
</template>
 
<script>
export default {
  methods: {
    toggleTheme() {
      const currentTheme = this.$store.state.theme;
      const nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
      this.$store.commit('setTheme', nextTheme);
      // 切换主题时，可以添加动画效果
      document.documentElement.classList.add('theme-transition');
      setTimeout(() => {
        document.documentElement.classList.remove('theme-transition');
      }, 1000);
    }
  }
}
</script>
 
<style lang="scss">
:root {
  --primary-color: #409EFF; /* 默认主题色 */
  --background-color: #FFFFFF; /* 默认背景色 */
  --text-color: #333333; /* 默认文本色 */
}
 
.theme-dark {
  --primary-color: #FFFFFF; /* 暗色主题的主题色 */
  --background-color: #333333; /* 暗色主题的背景色 */
  --text-color: #FFFFFF; /* 暗色主题的文本色 */
}
 
.theme-transition {
  transition: color 1s, background-color 1s;
}
 
/* 应用主题样式到全局元素 */
body {
  color: var(--text-color);
  background-color: var(--background-color);
 
  .el-button {
    background-color: var(--primary-color);
    color: var(--text-color);
  }
  /* 其他样式 */
}
</style>

在这个简化的例子中，我们使用了SCSS的变量来定义主题色和背景色，并通过CSS变量在全局范围内应用这些主题色。我们还添加了一个.theme-transition类来实现在切换主题时的动画效果。这个例子展示了如何在Vue应用中实现主题切换的基本方法，并且保持了代码的简洁性。