46 lines
1.3 KiB
JavaScript
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)
|
|
}
|