| | |
| | | <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" /> |
| | |
| | | </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> |