mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-28 04:38:59 +00:00
Anso
c0a252026d
* feat(appearance): add theme, accent, contrast, and typography personalization Expand Settings to Appearance into a full personalization surface and add a quick switcher to the top bar (the palette button between search and notifications). Choices are saved to the browser, sync across tabs, and apply before first paint so there is no flash on reload. - Themes: Dim (the default raised charcoal), OLED true black, Light, and Auto (follows the OS and re-resolves live when it flips). - Accent: an eight-hue wheel (cyan default) that drives the one data color across charts, rails, focus rings, active states, and the ambient glow. - Fine-tune sliders: a master Contrast that spreads page, ink, and borders together, plus Border brightness and Ambient glow. - Typography: swappable interface (Geist / IBM Plex Sans / Hanken Grotesk) and data (Geist Mono / IBM Plex Mono / Fira Code) faces, and a text-size control (continuous slider in Settings, S/M/L/XL presets in the popover, kept in sync). The display serif stays locked as the signature face. Surfaces, borders, and ink derive from per-theme lightness values so the live knobs scale the whole UI through CSS, and the opaque directional borders read on every panel including true black. A live preview reflects changes in real time. Adds a documentation page under Features. * fix(appearance): keep contrast-driven tokens in gamut and add picker keyboard nav Clamp the contrast and knob driven surface, border, and ink lightness so the full slider range stays a valid color. The page now always sits below the card tone, so page/card separation no longer collapses at high contrast in Light; the lit border edge never reaches white in Light at the low end of the knobs; and the OLED and Dim extremes resolve to valid black/white instead of out-of-range values. Add the radiogroup keyboard model (roving tabindex plus Arrow / Home / End) to the accent and type pickers through a shared hook, matching the segmented control. One item is tabbable and arrow keys move focus and selection together.
80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
(function () {
|
|
// Pre-paint: apply the saved theme/accent/knobs/type to <html> before first
|
|
// paint so there is no flash. Mirrors the apply logic in src/hooks/use-theme.ts;
|
|
// keep the two in sync. Dependency-free on purpose (runs in <head>).
|
|
var STORAGE_KEY = 'sencho.appearance.theme';
|
|
var LEGACY_KEY = 'sencho-theme';
|
|
var MODES = { dim: 1, oled: 1, light: 1, auto: 1 };
|
|
var ACCENTS = {
|
|
cyan: 1, blue: 1, violet: 1, magenta: 1,
|
|
orange: 1, amber: 1, lime: 1, steel: 1,
|
|
};
|
|
var UI_FONTS = { 'Geist': 1, 'IBM Plex Sans': 1, 'Hanken Grotesk': 1 };
|
|
var MONO_FONTS = { 'Geist Mono': 1, 'IBM Plex Mono': 1, 'Fira Code': 1 };
|
|
var DEFAULTS = {
|
|
theme: 'dim', accent: 'cyan', borderBoost: 0, glow: 0.16, contrast: 0,
|
|
uiFont: 'Geist', monoFont: 'Geist Mono', typeScale: 1,
|
|
};
|
|
|
|
function num(v, min, max, def) {
|
|
if (typeof v !== 'number' || !isFinite(v)) return def;
|
|
return Math.min(max, Math.max(min, v));
|
|
}
|
|
|
|
function read() {
|
|
try {
|
|
var raw = localStorage.getItem(STORAGE_KEY);
|
|
if (raw) {
|
|
var p = JSON.parse(raw);
|
|
if (p && typeof p === 'object') {
|
|
return {
|
|
theme: MODES[p.theme] ? p.theme : DEFAULTS.theme,
|
|
accent: ACCENTS[p.accent] ? p.accent : DEFAULTS.accent,
|
|
borderBoost: num(p.borderBoost, -0.06, 0.12, DEFAULTS.borderBoost),
|
|
glow: num(p.glow, 0, 0.4, DEFAULTS.glow),
|
|
contrast: num(p.contrast, -0.6, 1.2, DEFAULTS.contrast),
|
|
uiFont: UI_FONTS[p.uiFont] ? p.uiFont : DEFAULTS.uiFont,
|
|
monoFont: MONO_FONTS[p.monoFont] ? p.monoFont : DEFAULTS.monoFont,
|
|
typeScale: num(p.typeScale, 0.88, 1.2, DEFAULTS.typeScale),
|
|
};
|
|
}
|
|
}
|
|
// Legacy migration: old string key held only the mode (dark mapped to dim).
|
|
var legacy = localStorage.getItem(LEGACY_KEY);
|
|
var legacyTheme = legacy === 'light' || legacy === 'auto' ? legacy : legacy === 'dark' ? 'dim' : null;
|
|
if (legacyTheme) {
|
|
var migrated = {};
|
|
for (var k in DEFAULTS) migrated[k] = DEFAULTS[k];
|
|
migrated.theme = legacyTheme;
|
|
return migrated;
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
var out = {};
|
|
for (var d in DEFAULTS) out[d] = DEFAULTS[d];
|
|
return out;
|
|
}
|
|
|
|
function resolveTheme(theme) {
|
|
if (theme === 'auto') {
|
|
var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
return dark ? 'dim' : 'light';
|
|
}
|
|
return theme;
|
|
}
|
|
|
|
try {
|
|
var s = read();
|
|
var resolved = resolveTheme(s.theme);
|
|
var root = document.documentElement;
|
|
root.dataset.theme = resolved;
|
|
root.dataset.accent = s.accent;
|
|
root.style.setProperty('--border-boost', String(s.borderBoost));
|
|
root.style.setProperty('--glow', String(s.glow));
|
|
root.style.setProperty('--contrast', String(s.contrast));
|
|
root.style.setProperty('--ui-font', "'" + s.uiFont + "'");
|
|
root.style.setProperty('--mono-font', "'" + s.monoFont + "'");
|
|
root.style.setProperty('--type-scale', String(s.typeScale));
|
|
root.classList.toggle('dark', resolved !== 'light');
|
|
} catch (e) { /* ignore */ }
|
|
})();
|