distorsion.interhacker.space/site/js/styleswitcher.js

/*
 * On enregistre ici la liste des feuilles de style disponibles.
 * Il doit toujours y avoir une feuille "Default".
 */
const styles = { "Default" : "/css/default.css",
				 "No-CSS" : "/css/no-css.css",
				 "Darkmagenta" : "/css/darkmagenta.css",
			   };

for (const linkElement of document.getElementsByTagName("link")) {
	if (linkElement.getAttribute("rel") === "stylesheet") {
		var linkStyleElement = linkElement;
		break;
	}
}

function setStyle (styleName) {
	linkStyleElement.setAttribute("href", styles[styleName])
	sessionStorage.setItem("currentStyle", styleName);
}

function initStyle () {
	const currentStyle = sessionStorage.getItem("currentStyle");
	if (currentStyle) {
		setStyle(currentStyle);
	}
	else {
		setStyle("Default");
	}
}

function initStyleSelectElement () {
	const styleSelectElement = document.getElementById("styleswitcher");

	/* On génère ici la liste des options du <select> dynamiquement. Ca permet
	 * de n'avoir à éditer que le script JavaScript pour ajouter de nouveaux
	 * style, plutôt que toutes les pages HTML. */
	for (const styleName in styles) {
		styleOption = document.createElement("option");
		styleOption.value = styleName;
		styleOption.textContent = styleName;
		styleSelectElement.add(styleOption);
	}
	
	styleSelectElement.value = sessionStorage.getItem("currentStyle");

	styleSelectElement.addEventListener("change", (event) => {setStyle(event.target.value)});
}

initStyle();