/**
 * This script is used to determine the theme of the site.
 * The theme value is taken from localstorage, otherwise from the operating system.
 * It is very important to include this script before loading the CSS
 * and body markup to prevent FOUC (Flash of unstyled content).
 */

window.theme = (() => {
	const local = localStorage.getItem("theme");
	if (local && (local === "dark" || local === "light")) return local;
	const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
	return isDark ? "dark" : "light";
})();

document.documentElement.setAttribute("data-theme", window.theme);

/* Sync with OS theme */
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
	window.theme = isDark ? "dark" : "light";
	localStorage.setItem("theme", window.theme);
	document.documentElement.setAttribute("data-theme", window.theme);
});