35 lines
792 B
Vue
35 lines
792 B
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import Icon from './Icon.vue';
|
|
|
|
const theme = ref('macchiato');
|
|
|
|
onMounted(() => {
|
|
const stored = localStorage.getItem('theme');
|
|
if (stored) {
|
|
theme.value = stored;
|
|
document.documentElement.setAttribute('data-theme', stored);
|
|
}
|
|
});
|
|
|
|
function toggleTheme() {
|
|
const newTheme = theme.value === 'macchiato' ? 'latte' : 'macchiato';
|
|
theme.value = newTheme;
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
@click="toggleTheme"
|
|
class="btn btn-ghost btn-circle"
|
|
aria-label="Toggle Theme"
|
|
>
|
|
<Icon
|
|
:name="theme === 'macchiato' ? 'moon' : 'sun'"
|
|
class="w-5 h-5"
|
|
/>
|
|
</button>
|
|
</template>
|