weblog/assets/js/light-dark-toggle.js

51 lines
1.3 KiB
JavaScript

function getUserPreference() {
return localStorage.getItem('theme') || 'system';
}
function saveUserPreference(userPreference) {
localStorage.setItem('theme', userPreference);
}
function getAppliedMode(userPreference) {
if (userPreference === 'light') {
return 'light';
}
if (userPreference === 'dark') {
return 'dark';
}
// system
if (matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
return 'dark';
}
function setAppliedMode(mode) {
document.documentElement.dataset.appliedMode = mode;
}
function rotatePreferences(userPreference) {
if (userPreference === 'system') {
return 'light'
}
if (userPreference === 'light') {
return 'dark';
}
if (userPreference === 'dark') {
return 'system';
}
// for invalid values, just in case
return 'system';
}
const themeToggler = document.getElementById('theme-toggle');
let userPreference = getUserPreference();
setAppliedMode(getAppliedMode(userPreference));
themeToggler.innerText = userPreference;
themeToggler.onclick = () => {
const newUserPref = rotatePreferences(userPreference);
userPreference = newUserPref;
saveUserPreference(newUserPref);
themeToggler.innerText = newUserPref;
setAppliedMode(getAppliedMode(newUserPref));
}