forked from LaconicNetwork/cosmos-explorer
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { useThemeConfig } from '@core/composable/useThemeConfig';
|
|
import type { ThemeSwitcherTheme } from '@layouts/types';
|
|
import { Icon } from '@iconify/vue';
|
|
import { onMounted, watch } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
themes: ThemeSwitcherTheme[];
|
|
}>();
|
|
|
|
const { theme } = useThemeConfig();
|
|
const {
|
|
state: currentThemeName,
|
|
next: getNextThemeName,
|
|
index: currentThemeIndex,
|
|
} = useCycleList(
|
|
props.themes.map(t => t.name),
|
|
{ initialValue: theme.value }
|
|
);
|
|
|
|
const changeTheme = () => {
|
|
theme.value = getNextThemeName();
|
|
};
|
|
|
|
const changeMode = (val: 'dark' | 'light' | 'system') => {
|
|
let value = val;
|
|
if (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
value = 'dark';
|
|
}
|
|
if (value === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
|
|
} else {
|
|
document.documentElement.classList.add('light');
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
document.documentElement.setAttribute("data-theme", value);
|
|
};
|
|
// Update icon if theme is changed from other sources
|
|
watch(theme, (val: 'dark' | 'light' | 'system') => {
|
|
currentThemeName.value = val;
|
|
changeMode(val);
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (currentThemeName.value) {
|
|
changeMode(currentThemeName.value);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
|
|
<button
|
|
class="btn btn-ghost btn-circle btn-sm mx-1"
|
|
@click="changeTheme"
|
|
>
|
|
<Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
|
|
</button>
|
|
</div>
|
|
</template>
|