ghost-theme-sd.ai/assets/js/theme.js

46 lines
1.3 KiB
JavaScript
Raw Normal View History

2023-10-16 17:04:36 +01:00
// 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() {
2023-10-17 14:59:28 +01:00
const src = document.documentElement.classList.contains("dark-theme") ? "/assets/images/favicon-dark.png" : "/assets/images/favicon.png";
2023-10-16 17:04:36 +01:00
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",
2023-10-16 19:55:08 +01:00
useLight ? "light" : "dark")
2023-10-16 17:04:36 +01:00
}
changeFavicon()
}
themeToggle.addEventListener("click", () => {
changeTheme(document.documentElement.classList.contains('dark-theme'))
});
2023-10-16 19:55:08 +01:00
if (localTheme === "light") {
changeTheme(true)
2023-10-16 17:04:36 +01:00
} else {
changeTheme(isOSLight)
}