From 038054b8206a9c25e84adeb0f0f355abd22d6143 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Mon, 22 Dec 2025 14:02:07 +0100 Subject: CSS & JS splitting, small fix section badge --- assets/js/theme.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 assets/js/theme.js (limited to 'assets/js/theme.js') diff --git a/assets/js/theme.js b/assets/js/theme.js new file mode 100644 index 0000000..36896c9 --- /dev/null +++ b/assets/js/theme.js @@ -0,0 +1,32 @@ +/* Toggle Dark/Light Mode */ +function initThemeToggle() { + const rootHtml = document.documentElement; + const toggleThemeBtn = document.getElementById("theme-toggle"); + + // If no saved theme, determine user preference, otherwise default to light + const savedTheme = localStorage.getItem("theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + const initialTheme = savedTheme ?? (prefersDark ? "dark" : "light"); + + function setTheme(theme) { + const isDarkMode = theme === "dark"; + // toggleThemeBtn dataset comes with translated labels for site's language + const label = isDarkMode ? toggleThemeBtn.dataset.labelLight : toggleThemeBtn.dataset.labelDark; + + rootHtml.setAttribute("data-theme", theme); + toggleThemeBtn.setAttribute("aria-label", label); // display handled by CSS + } + + // Apply initial theme + setTheme(initialTheme); + + // Change theme on click and save user's choice + toggleThemeBtn.addEventListener("click", () => { + const newTheme = rootHtml.getAttribute("data-theme") === "dark" ? "light" : "dark"; + setTheme(newTheme); + localStorage.setItem("theme", newTheme); + }); +} + +export default initThemeToggle; + -- cgit v1.2.3