mirror of
https://github.com/NotXia/notxia.github.io.git
synced 2025-12-14 19:01:51 +01:00
30 lines
879 B
Vue
30 lines
879 B
Vue
<template>
|
|
<button class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700" @click="changeTheme">
|
|
<div class="w-5 h-5 flex items-center justify-center">
|
|
<div v-if="current_theme === 'light'">
|
|
<img src="~/assets/images/icons/moon.svg" alt="Dark theme" class="h-full w-full" />
|
|
</div>
|
|
|
|
<div v-if="current_theme === 'dark'">
|
|
<img src="~/assets/images/icons/sun.svg" alt="Light theme" class="invert h-full w-full" />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
const current_theme = ref("");
|
|
|
|
onMounted(() => {
|
|
current_theme.value = getTheme();
|
|
})
|
|
|
|
function changeTheme() {
|
|
flipTheme();
|
|
current_theme.value = getTheme();
|
|
applyTheme(current_theme.value);
|
|
}
|
|
</script>
|