43 lines
1015 B
Vue
43 lines
1015 B
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
import IconMoonStars from './icons/IconMoonStars.vue'
|
|
import IconSun from './icons/IconSun.vue'
|
|
|
|
const theme_icons = {
|
|
'light': IconSun,
|
|
'dark': IconMoonStars,
|
|
}
|
|
|
|
let storedTheme = localStorage.getItem('theme')
|
|
if (!storedTheme) {
|
|
storedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
}
|
|
|
|
const currentTheme = ref(storedTheme)
|
|
document.documentElement.setAttribute('data-bs-theme', storedTheme)
|
|
|
|
async function click(ev) {
|
|
ev.preventDefault()
|
|
|
|
let newTheme = 'light'
|
|
if (currentTheme.value == 'light') {
|
|
newTheme = 'dark'
|
|
}
|
|
|
|
currentTheme.value = newTheme
|
|
document.documentElement.setAttribute('data-bs-theme', newTheme)
|
|
localStorage.setItem('theme', newTheme)
|
|
}
|
|
|
|
const currentIcon = computed(() => theme_icons[currentTheme.value])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<button type="button" @click="click" class="btn btn-primary align-items-center py-2">
|
|
<component :is="currentIcon" />
|
|
</button>
|
|
</template>
|
|
|