root
97ea48bc6f
- theme: store accent separately for light/dark (theme-core/controls) - en contacts: WhatsApp card instead of VK (wa.me link) - Activity: add GitHub card (logo webp) in both locales - mp-card__image border uses --line to match card (less contrast)
61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
/**
|
|
* Стенд: переключение темы и скругления.
|
|
* Пишет в localStorage под тем же ключом, что и панель темы сайта,
|
|
* поэтому выбранный режим сохранится при переходе на сам сайт.
|
|
*/
|
|
import { STORAGE_KEY, readThemeState, writeThemeState } from "/js/modules/theme/theme-core.js";
|
|
import { ensureThemeFontLoaded } from "/js/modules/theme/theme-fonts.js";
|
|
|
|
function apply(patch) {
|
|
const state = { ...readThemeState(), ...patch };
|
|
writeThemeState(state);
|
|
|
|
const root = document.documentElement;
|
|
|
|
// Тема: только светлая/тёмная. Режим «system» на стенде не нужен —
|
|
// важно видеть обе темы принудительно.
|
|
if (state.mode === "system") state.mode = prefersDark() ? "dark" : "light";
|
|
root.dataset.theme = state.mode;
|
|
|
|
if (state.radius) root.dataset.radius = state.radius;
|
|
if (state.font) root.dataset.font = state.font;
|
|
|
|
const labAcc = state[state.mode] || state.light || { h: 210, s: 90, l: 40 };
|
|
root.style.setProperty("--theme-h", String(labAcc.h));
|
|
root.style.setProperty("--theme-s", String(labAcc.s));
|
|
root.style.setProperty("--theme-l", String(labAcc.l));
|
|
|
|
ensureThemeFontLoaded(state.font);
|
|
syncButtons();
|
|
}
|
|
|
|
function prefersDark() {
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
}
|
|
|
|
function bind(attr, key) {
|
|
const btns = document.querySelectorAll(`[${attr}]`);
|
|
btns.forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
apply({ [key]: btn.getAttribute(attr) });
|
|
});
|
|
});
|
|
}
|
|
|
|
function syncButtons() {
|
|
const state = readThemeState();
|
|
const theme = state.mode === "system" ? (prefersDark() ? "dark" : "light") : state.mode;
|
|
|
|
document.querySelectorAll("[data-lab-theme]").forEach((btn) => {
|
|
btn.setAttribute("aria-pressed", btn.getAttribute("data-lab-theme") === theme ? "true" : "false");
|
|
});
|
|
|
|
document.querySelectorAll("[data-lab-radius]").forEach((btn) => {
|
|
btn.setAttribute("aria-pressed", btn.getAttribute("data-lab-radius") === state.radius ? "true" : "false");
|
|
});
|
|
}
|
|
|
|
bind("data-lab-theme", "mode");
|
|
bind("data-lab-radius", "radius");
|
|
syncButtons();
|