126 lines
4.4 KiB
JavaScript
126 lines
4.4 KiB
JavaScript
// Enable transitions between themes without reloading page
|
|
|
|
var Themes = {
|
|
AUTO: "auto",
|
|
LIGHT: "light",
|
|
DARK: "dark"
|
|
};
|
|
|
|
var jsTheme;
|
|
|
|
window.addEventListener("load", function() {
|
|
|
|
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
|
// Add trees
|
|
if (!document.querySelector(".tree")) {
|
|
for (var x = 0; x < width; x += 240) {
|
|
var left = x + Math.floor(Math.random() * 240 / 2);
|
|
var bottom = Math.floor(Math.random() * 150);
|
|
var img = document.createElement("img");
|
|
img.className = "tree";
|
|
img.height = 300;
|
|
img.alt = "";
|
|
img.style.position = "fixed";
|
|
img.style.left = left + "px";
|
|
img.style.bottom = bottom + "px";
|
|
document.body.appendChild(img);
|
|
}
|
|
}
|
|
|
|
// Apply current theme
|
|
var themeCookie = document.cookie.match(/theme=([a-z]+)/i);
|
|
if (themeCookie) applyTheme(themeCookie[1], true);
|
|
else applyPreferredTheme(true);
|
|
|
|
// Add click listener to theme buttons
|
|
var themeBtns = document.getElementsByClassName("theme-btn");
|
|
for (var i = 0; i < themeBtns.length; i++) {
|
|
themeBtns[i].onclick = function(e) {
|
|
|
|
var event = e || window.event;
|
|
var target = event.target || event.srcElement;
|
|
|
|
event.returnValue = false;
|
|
if (event.preventDefault) event.preventDefault();
|
|
|
|
// Ignore if already selected
|
|
if (target.className.indexOf("selected") > -1) return;
|
|
|
|
// Get new theme
|
|
var theme = target.getAttribute("data-theme");
|
|
|
|
// Apply theme changes
|
|
if (theme === Themes.AUTO) {
|
|
document.cookie = "theme=; expires=Tue, 19 Jan 2038 03:14:08 GMT";
|
|
applyPreferredTheme(false);
|
|
} else {
|
|
document.cookie = "theme=" + theme + "; expires=Tue, 19 Jan 2038 03:14:08 GMT"
|
|
applyTheme(theme, false);
|
|
}
|
|
|
|
// Set new selected button
|
|
deselectThemeButton(document.querySelector(".theme-btn.selected"));
|
|
selectThemeButton(target);
|
|
|
|
// Force redrawing of containers because of a bug in IE8
|
|
var containers = document.getElementsByClassName("container");
|
|
for (var i = 0; i < containers.length; i++) containers[i].className += "";
|
|
|
|
}
|
|
}
|
|
|
|
// Automatically computes the preferred theme and calls applyTheme() with it
|
|
function applyPreferredTheme(firstTime) {
|
|
var preferredTheme = ("matchMedia" in window && matchMedia("(prefers-color-scheme: dark)").matches) ? Themes.DARK : Themes.LIGHT;
|
|
applyTheme(preferredTheme, firstTime);
|
|
}
|
|
|
|
function applyTheme(theme, firstTime) {
|
|
|
|
if (jsTheme && jsTheme.href.match(theme)) return;
|
|
|
|
// Set trees
|
|
var trees = document.getElementsByClassName("tree");
|
|
for (var i = 0; i < trees.length; i++) {
|
|
trees[i].src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
|
|
}
|
|
|
|
if (!firstTime) {
|
|
|
|
if (jsTheme) document.head.removeChild(jsTheme);
|
|
jsTheme = document.createElement("link");
|
|
jsTheme.rel = "stylesheet";
|
|
jsTheme.href = "/assets/style/" + theme + "-mode.css";
|
|
document.head.appendChild(jsTheme);
|
|
|
|
if (window.linkOnloadSupported) {
|
|
document.body.className += " loading";
|
|
jsTheme.onload = function () {
|
|
document.body.className = document.body.className.replace(/\s*loading/g, "");
|
|
var themeStyles = document.getElementsByClassName("theme-style");
|
|
for (var i = 0; i < themeStyles.length; i++) {
|
|
document.head.removeChild(themeStyles[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Functions to select/deselect a theme button
|
|
|
|
function selectThemeButton(themeBtn) {
|
|
if (themeBtn.textContent) themeBtn.textContent += " ✓";
|
|
else themeBtn.innerText += " ✓";
|
|
themeBtn.className += "selected";
|
|
}
|
|
|
|
function deselectThemeButton(themeBtn) {
|
|
if (themeBtn.textContent) themeBtn.textContent = themeBtn.textContent.replace(" ✓", "");
|
|
else themeBtn.innerText = themeBtn.innerText.replace(" ✓", "");
|
|
themeBtn.className = themeBtn.className.replace("selected", "");
|
|
}
|
|
|
|
}, false); |