28 lines
706 B
Vue
28 lines
706 B
Vue
<script setup lang="ts">
|
|
const isDark = ref(false);
|
|
onMounted(() => {
|
|
isDark.value = document.documentElement.classList.contains('dark');
|
|
});
|
|
function toggle() {
|
|
isDark.value = !isDark.value;
|
|
document.documentElement.classList.toggle('dark', isDark.value);
|
|
try {
|
|
localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="btn-secondary"
|
|
:aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
|
|
@click="toggle"
|
|
>
|
|
<span aria-hidden>{{ isDark ? '☾' : '☀' }}</span>
|
|
<span class="hidden sm:inline">{{ isDark ? 'Dark' : 'Light' }}</span>
|
|
</button>
|
|
</template>
|