Theme switcher and BULMA
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
||||
const theme = ref(localStorage.getItem('theme') || 'auto');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
|
||||
export function applyTheme() {
|
||||
const resolved = theme.value === 'auto' ? (prefersDark.matches ? 'dark' : 'light') : theme.value;
|
||||
document.documentElement.setAttribute('data-theme', resolved);
|
||||
}
|
||||
|
||||
export function setTheme(value) {
|
||||
theme.value = value;
|
||||
localStorage.setItem('theme', value);
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
prefersDark.addEventListener('change', () => {
|
||||
if (theme.value === 'auto') applyTheme();
|
||||
});
|
||||
Reference in New Issue
Block a user