vue3 使用css新属性v-bind (v-bind+pinia)实现颜色主题切换

<template>
  <div class="app" :class="theme">
    <!-- 内容 -->
  </div>
</template>
 
<script setup>
import { computed } from 'vue';
import { useStore } from 'pinia';
 
const store = useStore();
const theme = computed(() => store.theme);
</script>
 
<style>
/* 默认主题 */
.app {
  --primary-color: #3498db;
  --accent-color: #e74c3c;
}
 
/* 暗色主题 */
.dark-theme {
  --primary-color: #2c3e50;
  --accent-color: #95a5a6;
  background-color: #2c3e50;
  color: #ffffff;
}
 
/* 使用CSS变量定义样式 */
.app button {
  background-color: var(--primary-color);
  color: var(--accent-color);
}
</style>

这个例子中，我们使用了CSS变量来定义主题色，并通过Vue的v-bind来动态绑定类名实现主题切换。当Pinia状态管理器中的theme状态变化时，相关的CSS变量也会更新，从而改变页面中元素的颜色。这是一个简单的实现主题切换的例子。