163 lines
4.9 KiB
JavaScript
163 lines
4.9 KiB
JavaScript
(function () {
|
|
var STORAGE_KEY = "theme";
|
|
|
|
var TOKENS = {
|
|
light: {
|
|
"--background": "#faf8f5",
|
|
"--foreground": "#1a1614",
|
|
"--muted": "#6b6560",
|
|
"--accent": "#4f46e5",
|
|
"--accent-secondary": "#ea580c",
|
|
"--accent-tertiary": "#db2777",
|
|
"--surface": "#ffffff",
|
|
"--surface-elevated": "#ffffff",
|
|
"--border": "#e8e4df",
|
|
"--border-strong": "#d6d0c8",
|
|
"--gradient-1": "#4f46e5",
|
|
"--gradient-2": "#ea580c",
|
|
"--gradient-3": "#db2777",
|
|
"--glow-sm": "0 8px 30px rgba(79, 70, 229, 0.12)",
|
|
"--glow-lg": "0 20px 50px rgba(234, 88, 12, 0.14)",
|
|
"--mesh-1": "rgba(79, 70, 229, 0.14)",
|
|
"--mesh-2": "rgba(234, 88, 12, 0.1)",
|
|
"--mesh-3": "rgba(219, 39, 119, 0.08)",
|
|
"--prose": "#44403c",
|
|
"--card-shadow":
|
|
"0 1px 2px rgba(26, 22, 20, 0.04), 0 8px 24px rgba(26, 22, 20, 0.06)",
|
|
"--callout-bg": "rgba(79, 70, 229, 0.06)",
|
|
"--callout-border": "rgba(79, 70, 229, 0.18)",
|
|
"--cover-from": "#3730a3",
|
|
"--cover-via": "#7c2d12",
|
|
"--cover-to": "#831843",
|
|
"--cover-glow": "rgba(79, 70, 229, 0.35)",
|
|
"--cta-from": "#4338ca",
|
|
"--cta-via": "#c2410c",
|
|
"--cta-to": "#9d174d",
|
|
"--cta-text": "#faf8f5",
|
|
"--cta-btn-bg": "#faf8f5",
|
|
"--cta-btn-text": "#3730a3",
|
|
},
|
|
dark: {
|
|
"--background": "#0f0e0d",
|
|
"--foreground": "#f5f2ed",
|
|
"--muted": "#a39e97",
|
|
"--accent": "#a5b4fc",
|
|
"--accent-secondary": "#fdba74",
|
|
"--accent-tertiary": "#f9a8d4",
|
|
"--surface": "#1a1816",
|
|
"--surface-elevated": "#242120",
|
|
"--border": "#2e2b28",
|
|
"--border-strong": "#3d3935",
|
|
"--gradient-1": "#818cf8",
|
|
"--gradient-2": "#fb923c",
|
|
"--gradient-3": "#f472b6",
|
|
"--glow-sm": "0 8px 32px rgba(129, 140, 248, 0.18)",
|
|
"--glow-lg": "0 20px 56px rgba(251, 146, 60, 0.12)",
|
|
"--mesh-1": "rgba(129, 140, 248, 0.12)",
|
|
"--mesh-2": "rgba(251, 146, 60, 0.1)",
|
|
"--mesh-3": "rgba(244, 114, 182, 0.08)",
|
|
"--prose": "#c9c2ba",
|
|
"--card-shadow":
|
|
"0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.35)",
|
|
"--callout-bg": "rgba(129, 140, 248, 0.08)",
|
|
"--callout-border": "rgba(165, 180, 252, 0.22)",
|
|
"--cover-from": "#312e81",
|
|
"--cover-via": "#7c2d12",
|
|
"--cover-to": "#701a3a",
|
|
"--cover-glow": "rgba(129, 140, 248, 0.4)",
|
|
"--cta-from": "#1e1b4b",
|
|
"--cta-via": "#431407",
|
|
"--cta-to": "#500724",
|
|
"--cta-text": "#f5f2ed",
|
|
"--cta-btn-bg": "#f5f2ed",
|
|
"--cta-btn-text": "#312e81",
|
|
},
|
|
};
|
|
|
|
function readTheme() {
|
|
var attr = document.documentElement.getAttribute("data-theme");
|
|
if (attr === "dark" || attr === "light") return attr;
|
|
return document.documentElement.classList.contains("dark") ? "dark" : "light";
|
|
}
|
|
|
|
function applyTheme(theme) {
|
|
var root = document.documentElement;
|
|
var tokens = TOKENS[theme];
|
|
if (!tokens) return;
|
|
|
|
if (theme === "dark") root.classList.add("dark");
|
|
else root.classList.remove("dark");
|
|
|
|
root.setAttribute("data-theme", theme);
|
|
root.style.colorScheme = theme;
|
|
|
|
for (var key in tokens) {
|
|
if (Object.prototype.hasOwnProperty.call(tokens, key)) {
|
|
root.style.setProperty(key, tokens[key]);
|
|
}
|
|
}
|
|
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, theme);
|
|
} catch (e) {}
|
|
|
|
updateToggleUi(theme);
|
|
}
|
|
|
|
function updateToggleUi(theme) {
|
|
var isDark = theme === "dark";
|
|
var buttons = document.querySelectorAll("[data-theme-toggle]");
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
var btn = buttons[i];
|
|
btn.setAttribute("aria-pressed", isDark ? "true" : "false");
|
|
btn.setAttribute(
|
|
"aria-label",
|
|
isDark ? "Switch to light mode" : "Switch to dark mode"
|
|
);
|
|
btn.title = isDark ? "Light mode" : "Dark mode";
|
|
var label = btn.querySelector("[data-theme-label]");
|
|
if (label) label.textContent = isDark ? "Light" : "Dark";
|
|
var sun = btn.querySelector("[data-theme-icon='sun']");
|
|
var moon = btn.querySelector("[data-theme-icon='moon']");
|
|
if (sun) sun.hidden = !isDark;
|
|
if (moon) moon.hidden = isDark;
|
|
}
|
|
}
|
|
|
|
function resolveInitial() {
|
|
try {
|
|
var stored = localStorage.getItem(STORAGE_KEY);
|
|
if (stored === "dark" || stored === "light") return stored;
|
|
} catch (e) {}
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
}
|
|
|
|
function toggleTheme() {
|
|
applyTheme(readTheme() === "dark" ? "light" : "dark");
|
|
}
|
|
|
|
window.NomadRoamTheme = {
|
|
apply: applyTheme,
|
|
toggle: toggleTheme,
|
|
read: readTheme,
|
|
};
|
|
|
|
applyTheme(resolveInitial());
|
|
|
|
document.addEventListener(
|
|
"click",
|
|
function (event) {
|
|
var target = event.target;
|
|
if (!target || !target.closest) return;
|
|
var btn = target.closest("[data-theme-toggle]");
|
|
if (!btn) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
toggleTheme();
|
|
},
|
|
true
|
|
);
|
|
})();
|