32 lines
760 B
Vue
32 lines
760 B
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import Icon from "./Icon.vue";
|
|
|
|
const theme = ref("sunset");
|
|
|
|
onMounted(() => {
|
|
const stored = localStorage.getItem("theme");
|
|
if (stored) {
|
|
theme.value = stored;
|
|
document.documentElement.setAttribute("data-theme", stored);
|
|
}
|
|
});
|
|
|
|
function toggleTheme() {
|
|
const newTheme = theme.value === "sunset" ? "winter" : "sunset";
|
|
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 === 'sunset' ? 'moon' : 'sun'" class="w-5 h-5" />
|
|
</button>
|
|
</template>
|