ghost-theme-sd.ai/assets/js/theme.js
2023-10-17 14:59:28 +01:00

46 lines
1.3 KiB
JavaScript

// Toggle theme
const isOSLight = window.matchMedia("(prefers-color-scheme: light)").matches
const localTheme = window.localStorage && window.localStorage.getItem("lightTheme")
const themeToggle = document.querySelector(".theme-toggle")
function changeFavicon() {
const src = document.documentElement.classList.contains("dark-theme") ? "/assets/images/favicon-dark.png" : "/assets/images/favicon.png";
const link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = src;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
function changeTheme(useLight) {
document.documentElement.classList.remove('light-theme', 'dark-theme', 'has-light-text', 'has-dark-text')
if (useLight) {
document.documentElement.classList.add('light-theme', 'has-dark-text')
} else {
document.documentElement.classList.add('dark-theme', 'has-light-text')
}
if (window.localStorage) {
window.localStorage.setItem(
"lightTheme",
useLight ? "light" : "dark")
}
changeFavicon()
}
themeToggle.addEventListener("click", () => {
changeTheme(document.documentElement.classList.contains('dark-theme'))
});
if (localTheme === "light") {
changeTheme(true)
} else {
changeTheme(isOSLight)
}