78 lines
2.5 KiB
Vue
78 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { useTheme } from "vuetify";
|
|
import { useCustomizerStore } from "@/stores/customizer";
|
|
import { Icon } from "@iconify/vue";
|
|
import { useNuxtApp } from "#app";
|
|
// import vuetify from '~/plugins/vuetify';
|
|
|
|
const theme = useTheme();
|
|
const customizer = useCustomizerStore();
|
|
|
|
// themes color options
|
|
const themeColors = ref([
|
|
{
|
|
name: "BLUE_THEME",
|
|
bg: "togglethemeBlue",
|
|
},
|
|
{
|
|
name: "DARK_BLUE_THEME",
|
|
bg: "togglethemeDarkBlue",
|
|
},
|
|
]);
|
|
console.log("Masuk theme")
|
|
const vuetify = useNuxtApp().$vuetify;
|
|
// const selectTheme = ref();
|
|
const selectTheme = () => {
|
|
if (customizer.actTheme == "BLUE_THEME")
|
|
customizer.SET_THEME(themeColors.value[1].name);
|
|
else customizer.SET_THEME(themeColors.value[0].name);
|
|
|
|
// vuetify.theme.dark = customizer.actTheme == 'DARK_BLUE_THEME'
|
|
vuetify.theme.global.name.value = customizer.actTheme;
|
|
console.log("customizer.actTheme", vuetify.theme.global.name);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <div class="position-relative">
|
|
<v-item-group mandatory v-model="customizer.actTheme" class="d-flex">
|
|
<div v-for="theme in themeColors" :key="theme.name">
|
|
<v-item v-slot="{toggle }" :value="theme.name">
|
|
<v-sheet rounded="circle" class="cursor-pointer text-center hover-btns" elevation="0" @click="toggle">
|
|
<v-btn icon :class="theme.bg" class="custom-hover-primary" size="small" variant="text" color="primary" >
|
|
<Icon v-if="theme.bg == 'togglethemeBlue'" icon="solar:sun-2-line-duotone" :class="theme.bg" height="22" />
|
|
<Icon v-if="theme.bg == 'togglethemeDarkBlue'" icon="solar:moon-line-duotone" :class="theme.bg" height="22" />
|
|
</v-btn>
|
|
</v-sheet>
|
|
</v-item>
|
|
</div>
|
|
</v-item-group>
|
|
</div> -->
|
|
<!-- <div class="position-relative"> -->
|
|
<v-btn
|
|
icon
|
|
:class="theme.bg"
|
|
class="custom-hover-primary"
|
|
size="small"
|
|
variant="text"
|
|
color="primary"
|
|
v-model="customizer.actTheme"
|
|
@click="selectTheme"
|
|
>
|
|
<Icon
|
|
v-if="customizer.actTheme == 'BLUE_THEME'"
|
|
icon="solar:sun-2-line-duotone"
|
|
:class="themeColors[0].bg"
|
|
height="22"
|
|
/>
|
|
<Icon
|
|
v-if="customizer.actTheme == 'DARK_BLUE_THEME'"
|
|
icon="solar:moon-line-duotone"
|
|
:class="themeColors[1].bg"
|
|
height="22"
|
|
/>
|
|
</v-btn>
|
|
<!-- </div> -->
|
|
</template>
|