From 41a6d16ef6a356bc286b0eafe267d04aeed174f3 Mon Sep 17 00:00:00 2001 From: delta Date: Mon, 3 Feb 2025 22:58:46 +0100 Subject: initial commit --- assets/js/main.js | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 assets/js/main.js (limited to 'assets/js/main.js') diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..5bc2d41 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,41 @@ +// Toggle the navigation menu and theme +document.addEventListener("DOMContentLoaded", function () { + var menuToggle = document.getElementById("menu-toggle"); + var mainNav = document.getElementById("main-nav"); + var themeToggle = document.getElementById("theme-toggle"); + var body = document.body; + + // Menu toggle functionality + menuToggle.addEventListener("click", function () { + mainNav.classList.toggle("open"); + }); + + // Theme toggle functionality + themeToggle.addEventListener("click", function () { + // Toggle between 'light' and 'dark' themes + var currentTheme = body.getAttribute("data-theme") || "light"; + var newTheme = currentTheme === "dark" ? "light" : "dark"; + body.setAttribute("data-theme", newTheme); + localStorage.setItem("theme", newTheme); + }); + + // On page load, set the theme from localStorage or system preference + var storedTheme = localStorage.getItem("theme"); + if (storedTheme) { + body.setAttribute("data-theme", storedTheme); + } else { + // Detect system preference + var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + var defaultTheme = prefersDarkScheme ? "dark" : "light"; + body.setAttribute("data-theme", defaultTheme); + } + + // Listen for changes in the system color scheme + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (e) { + var storedTheme = localStorage.getItem("theme"); + if (!storedTheme) { + var newColorScheme = e.matches ? "dark" : "light"; + body.setAttribute("data-theme", newColorScheme); + } + }); +}); -- cgit v1.2.3