1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <template>
| <view class="flex flex-wrap gap-3">
| <view
| 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 }"
| @click="changeTheme(item.name)"
| >
| <view v-if="theme === item.name" class="i-mdi-check text-32rpx c-#fff" />
| </view>
| </view>
| </template>
|
| <script setup>
| import { useAppStore } from "@/store";
|
| const appStore = useAppStore();
|
| const colors = [
| {
| name: "",
| color: "#21d59d",
| },
| {
| name: "blue",
| color: "#3c9cff",
| },
| ];
|
| const theme = computed(() => appStore.getTheme);
|
| function changeTheme(theme) {
| appStore.setTheme(theme);
| }
| </script>
|
|
