root
a0dda98b83
- build-pages.mjs: per-locale page/partial overrides (*.en.html), i18n token
resolution with ru fallback, <html lang> + assetPrefix per locale
- UI dictionaries src/i18n/{ru,en}.json; lang-switch partial
- headers/footer/partials converted to {{i18n:…}} tokens
- root-absolute static asset refs so /en/ subpath loads css/js/vendor
- EN content: homepage (index.en.html + partials) and cookie-policy.en.html
(cookie-policy body translated via apinex.bond /v1/tools/translator)
60 lines
2.1 KiB
JavaScript
60 lines
2.1 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;
|
|
|
|
root.style.setProperty("--theme-h", String(state.h));
|
|
root.style.setProperty("--theme-s", String(state.s));
|
|
root.style.setProperty("--theme-l", String(state.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();
|