<template>
	<div class="theme-transform">
		<img src="@/assets/images/hzImg/themeIcon.png" alt="" />
		<img src="@/assets/images/hzImg/blueTheme.png" alt="" @click="changePrimary('#5289D9')" />
		<img src="@/assets/images/hzImg/greenTheme.png" alt="" @click="changePrimary('#02A47D')" />
	</div>
</template>

<script setup lang="tsx" name="ProjectSupervisionRecord">
import { ref, reactive, nextTick, computed } from "vue";
import { useTheme } from "@/hooks/useTheme";
const { changePrimary } = useTheme();
</script>
<style scoped lang="scss">
.theme-transform {
	width: 92px;
	height: 29px;
	position: absolute;
	left: 22px;
	bottom: 19px;
	border: 2px solid #1bbcc8;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	img:not(:first-child) {
		cursor: pointer;
	}
}
</style>
