71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
const PID_THEME_KEY = "pid_theme";
|
|
const PID_COLOR_THEME_KEY = "pid_color_theme";
|
|
|
|
const PID_COLOR_THEMES = [
|
|
{ key: "roxo", label: "Roxo", swatch: "#7c4dff" },
|
|
{ key: "azul", label: "Azul", swatch: "#3b82f6" },
|
|
{ key: "verde", label: "Verde", swatch: "#22c55e" },
|
|
{ key: "ambar", label: "Âmbar", swatch: "#f59e0b" },
|
|
{ key: "rosa", label: "Rosa", swatch: "#ec4899" },
|
|
{ key: "vermelho", label: "Vermelho", swatch: "#ef4444" },
|
|
];
|
|
|
|
(function applyStoredTheme() {
|
|
const stored = localStorage.getItem(PID_THEME_KEY);
|
|
if (stored) {
|
|
document.documentElement.setAttribute("data-theme", stored);
|
|
}
|
|
})();
|
|
|
|
(function applyStoredColorTheme() {
|
|
const stored = localStorage.getItem(PID_COLOR_THEME_KEY);
|
|
if (stored) {
|
|
document.documentElement.setAttribute("data-color-theme", stored);
|
|
}
|
|
})();
|
|
|
|
function pidSyncLoginLogo() {
|
|
const img = document.getElementById("login-logo");
|
|
if (!img) return;
|
|
const theme = document.documentElement.getAttribute("data-theme") || "dark";
|
|
const src = theme === "light" ? img.dataset.logoLight : img.dataset.logoDark;
|
|
if (src) img.src = src;
|
|
}
|
|
|
|
pidSyncLoginLogo();
|
|
document.addEventListener("pid:theme-changed", pidSyncLoginLogo);
|
|
|
|
function pidToggleTheme() {
|
|
const current = document.documentElement.getAttribute("data-theme") || "dark";
|
|
const next = current === "dark" ? "light" : "dark";
|
|
document.documentElement.setAttribute("data-theme", next);
|
|
localStorage.setItem(PID_THEME_KEY, next);
|
|
document.dispatchEvent(new CustomEvent("pid:theme-changed", { detail: { theme: next } }));
|
|
}
|
|
|
|
function pidGetColorTheme() {
|
|
return document.documentElement.getAttribute("data-color-theme") || "roxo";
|
|
}
|
|
|
|
function pidSetColorTheme(themeKey) {
|
|
document.documentElement.setAttribute("data-color-theme", themeKey);
|
|
localStorage.setItem(PID_COLOR_THEME_KEY, themeKey);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const btn = document.getElementById("theme-toggle");
|
|
if (!btn) return;
|
|
|
|
const syncIcon = () => {
|
|
const theme = document.documentElement.getAttribute("data-theme") || "dark";
|
|
btn.setAttribute("aria-pressed", theme === "light");
|
|
btn.setAttribute("aria-label", theme === "dark" ? "Ativar modo claro" : "Ativar modo escuro");
|
|
};
|
|
|
|
syncIcon();
|
|
btn.addEventListener("click", () => {
|
|
pidToggleTheme();
|
|
syncIcon();
|
|
});
|
|
});
|