mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-30 18:46:00 +00:00
Maurice
e800699191
The global text-size control only set the root font-size, which scales rem-based text (navbar, menus) but not the dense inline px sizes used across the trip planner, budget, journey and panels — so place titles and addresses stayed fixed. applyAppearance now also exposes the factor as --fs-scale-text, and a codemod wraps inline numeric fontSize in calc(<px> * var(--fs-scale-text, 1)) across components and pages (map popups and PDF excluded). Sizes are byte-identical at 100%; the control now visibly resizes the actual content.
61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
/*
|
|
* Pre-paint appearance boot — kills the flash of default/wrong theme (FOUC).
|
|
*
|
|
* Loaded as an external, render-blocking CLASSIC script in <head> (NOT a module)
|
|
* so it runs before first paint AND complies with the production CSP
|
|
* (script-src 'self'; inline scripts are blocked). It reads the compact snapshot
|
|
* written by client/src/theme/applyAppearance.ts and applies it verbatim. Keep
|
|
* this in sync with that module's snapshot shape + apply logic.
|
|
*
|
|
* It must never throw — any failure silently falls back to the default look.
|
|
*/
|
|
(function () {
|
|
try {
|
|
var raw = localStorage.getItem('trek_appearance');
|
|
if (!raw) return;
|
|
var s = JSON.parse(raw);
|
|
if (!s || s.v !== 1) return;
|
|
|
|
var root = document.documentElement;
|
|
var path = location.pathname;
|
|
var isShared = path.indexOf('/shared/') === 0 || path.indexOf('/public/') === 0;
|
|
|
|
var dark;
|
|
if (isShared) dark = false;
|
|
else if (s.darkMode === 'auto') dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
else dark = s.darkMode === true || s.darkMode === 'dark';
|
|
root.classList.toggle('dark', dark);
|
|
|
|
var scheme = isShared ? 'default' : s.scheme;
|
|
if (scheme && scheme !== 'default') root.setAttribute('data-scheme', scheme);
|
|
if (!isShared && s.noTransparency) root.setAttribute('data-no-transparency', '');
|
|
if (s.density === 'compact') root.setAttribute('data-density', 'compact');
|
|
if (s.reduceMotion) root.setAttribute('data-reduce-motion', '');
|
|
|
|
if (!isShared && scheme === 'custom' && s.accent) {
|
|
root.style.setProperty('--accent-custom-light', s.accent.light);
|
|
root.style.setProperty('--accent-custom-dark', s.accent.dark);
|
|
if (s.accentText) {
|
|
root.style.setProperty('--accent-custom-text-light', s.accentText.light);
|
|
root.style.setProperty('--accent-custom-text-dark', s.accentText.dark);
|
|
}
|
|
}
|
|
|
|
var ts = s.typeScale || {};
|
|
setScale('--fs-scale-title', ts.title);
|
|
setScale('--fs-scale-subtitle', ts.subtitle);
|
|
setScale('--fs-scale-body', ts.body);
|
|
setScale('--fs-scale-caption', ts.caption);
|
|
if (typeof s.fontScale === 'number' && s.fontScale !== 1) {
|
|
root.style.fontSize = s.fontScale * 100 + '%';
|
|
root.style.setProperty('--fs-scale-text', String(s.fontScale));
|
|
}
|
|
|
|
function setScale(name, v) {
|
|
if (typeof v === 'number' && v !== 1) root.style.setProperty(name, String(v));
|
|
}
|
|
} catch (e) {
|
|
/* never block boot */
|
|
}
|
|
})();
|