shuishen
2025-09-29 b9a26af5b08d3d92a6c38fd90e023bc4706f19eb
src/components/theme-picker/index.vue
@@ -1,9 +1,11 @@
<template>
  <view class="flex flex-wrap gap-3">
    <view
      v-for="(item, index) in colors" :key="index"
      v-for="(item, index) in colors"
      :key="index"
      class="mb-10rpx h-40rpx w-40rpx center cursor-pointer border-4rpx border-gray-300 rounded-4rpx border-solid"
      :class="{ 'border-white': theme === item.name }" :style="{ backgroundColor: item.color }"
      :class="{ 'border-white': theme === item.name }"
      :style="{ backgroundColor: item.color }"
      @click="changeTheme(item.name)"
    >
      <view v-if="theme === item.name" class="i-mdi-check text-32rpx c-#fff" />
@@ -12,25 +14,24 @@
</template>
<script setup>
import { useAppStore } from "@/store"
import { useAppStore } from "@/store";
const appStore = useAppStore()
const appStore = useAppStore();
const colors = [
  {
    name: "",
    color: "#21d59d"
    color: "#21d59d",
  },
  {
    name: "blue",
    color: "#3c9cff"
  }
]
    color: "#3c9cff",
  },
];
const theme = computed(() => appStore.getTheme)
const theme = computed(() => appStore.getTheme);
function changeTheme(theme) {
  appStore.setTheme(theme)
  appStore.setTheme(theme);
}
</script>