Stylesheet Updats

2025-08-24 23:47:15 -05:00
parent a215784424
commit f2e774f8ec
35 changed files with 6083 additions and 16022 deletions
--- a/media/templates/site/moko-cassiopeia/js/theme-init.js
+++ b/media/templates/site/moko-cassiopeia/js/theme-init.js
@@ -0,0 +1,111 @@
+/**
+ * theme-init.js — Light/Dark mode initialization for Moko Cassiopeia
+ *
+ * @package     Joomla.Site
+ * @subpackage  Templates.Moko-Cassiopeia
+ * @file        /media/templates/site/moko-cassiopeia/js/theme-init.js
+ * @version     2.0
+ *
+ * @copyright   (C) 2025 Moko Consulting
+ * @author      Jonathan Miller
+ * @website     https://mokoconsulting.tech
+ * @email       hello@mokoconsulting.tech
+ * @phone       +1 (931) 279-6313
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+(function (win, doc) {
+	"use strict";
+
+	var storageKey = "theme"; // localStorage key
+	var mql = win.matchMedia("(prefers-color-scheme: dark)");
+	var root = doc.documentElement;
+
+	/**
+	 * Apply theme to <html>, syncing both data-bs-theme and data-aria-theme.
+	 * @param {"light"|"dark"} theme
+	 */
+	function applyTheme(theme) {
+		root.setAttribute("data-bs-theme", theme);
+		root.setAttribute("data-aria-theme", theme);
+		try { localStorage.setItem(storageKey, theme); } catch (e) {}
+	}
+
+	/**
+	 * Clear stored preference so system preference is followed.
+	 */
+	function clearStored() {
+		try { localStorage.removeItem(storageKey); } catch (e) {}
+	}
+
+	/**
+	 * Determine system theme.
+	 */
+	function systemTheme() {
+		return mql.matches ? "dark" : "light";
+	}
+
+	/**
+	 * Initialize theme on load.
+	 */
+	function init() {
+		var stored = null;
+		try { stored = localStorage.getItem(storageKey); } catch (e) {}
+
+		var theme = stored ? stored : systemTheme();
+		applyTheme(theme);
+
+		// Listen for system changes only if Auto mode (no stored)
+		var onChange = function () {
+			if (!localStorage.getItem(storageKey)) {
+				applyTheme(systemTheme());
+			}
+		};
+		if (typeof mql.addEventListener === "function") {
+			mql.addEventListener("change", onChange);
+		} else if (typeof mql.addListener === "function") {
+			mql.addListener(onChange);
+		}
+
+		// Hook toggle UI if present
+		var switchEl = doc.getElementById("themeSwitch");
+		var autoBtn  = doc.getElementById("themeAuto");
+
+		if (switchEl) {
+			switchEl.checked = (theme === "dark");
+			switchEl.addEventListener("change", function () {
+				var choice = switchEl.checked ? "dark" : "light";
+				applyTheme(choice);
+			});
+		}
+
+		if (autoBtn) {
+			autoBtn.addEventListener("click", function () {
+				clearStored();
+				applyTheme(systemTheme());
+			});
+		}
+	}
+
+	if (doc.readyState === "loading") {
+		doc.addEventListener("DOMContentLoaded", init);
+	} else {
+		init();
+	}
+})(window, document);