mirror of
https://github.com/by-jp/www.byjp.me.git
synced 2025-08-09 22:16:07 +01:00
60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
/**
|
|
* Theming.
|
|
*
|
|
* Supports the preferred color scheme of the operation system as well as
|
|
* the theme choice of the user.
|
|
*
|
|
*/
|
|
const themeToggle = document.querySelector(".theme-toggle");
|
|
const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
|
|
const chosenThemeIsDark = chosenTheme == "dark";
|
|
const chosenThemeIsLight = chosenTheme == "light";
|
|
|
|
// Detect the color scheme the operating system prefers.
|
|
function detectOSColorTheme() {
|
|
if (chosenThemeIsDark) {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
} else if (chosenThemeIsLight) {
|
|
document.documentElement.setAttribute("data-theme", "light");
|
|
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", "light");
|
|
}
|
|
}
|
|
|
|
// Switch the theme.
|
|
function switchTheme(e) {
|
|
if (chosenThemeIsDark) {
|
|
localStorage.setItem("theme", "light");
|
|
} else {
|
|
localStorage.setItem("theme", "dark");
|
|
}
|
|
|
|
detectOSColorTheme();
|
|
window.location.reload();
|
|
}
|
|
|
|
// Event listener
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener("click", switchTheme, false);
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
|
|
window
|
|
.matchMedia("(prefers-color-scheme: light)")
|
|
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
|
|
|
|
detectOSColorTheme();
|
|
} else {
|
|
localStorage.removeItem("theme");
|
|
}
|
|
|
|
function updateAccentColor() {
|
|
const now = new Date()
|
|
let start = new Date(now)
|
|
const hue = (now - start.setHours(0,0,0,0)) / 240000
|
|
document.documentElement.style.setProperty('--accent', `hsl(${hue}, 100%, 60%)`);
|
|
}
|
|
setInterval(updateAccentColor, 15000)
|
|
updateAccentColor()
|