38 lines
867 B
JavaScript
38 lines
867 B
JavaScript
import { ref, onMounted } from 'vue';
|
|
|
|
export function useDarkMode() {
|
|
const isDark = ref(false);
|
|
|
|
function toggle() {
|
|
isDark.value = !isDark.value;
|
|
if (isDark.value) {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.setItem('darkMode', 'true');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem('darkMode', 'false');
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
const saved = localStorage.getItem('darkMode');
|
|
if (saved === 'true' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
isDark.value = true;
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
isDark.value = false;
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
|
|
return {
|
|
isDark,
|
|
toggle,
|
|
init,
|
|
};
|
|
}
|