peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(glass): user-facing Image-fade slider under Settings > Background image

Browse source 
Replaces the dev-only backdrop-fade knob with a real control: when Background
image is on (dark theme), a 0-100% 'Image fade' slider appears beneath it and
drives --bg-fade live (higher = fainter). Persists to DB + localStorage via the
existing theme prefs path (ThemePrefs.bgFade, applyTheme sets the CSS var).
Removed --bg-fade from the GlassTuner so the two don't fight over the var.
This commit is contained in:
npeter83 2026-07-12 22:24:09 +02:00
parent f9f90cf609
commit a187b2f475
6 changed files with 25 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/lib/theme.ts
View file

@ -18,6 +18,8 @@ export interface ThemePrefs {
fontScale: number;
/** Show the per-scheme background image (dark theme only); off = flat colour. */
bgImage: boolean;
/** How strongly the background image is faded out, 0–100% (higher = fainter). */
bgFade: number;
}
export const DEFAULT_THEME: ThemePrefs = {
@ -25,6 +27,7 @@ export const DEFAULT_THEME: ThemePrefs = {
scheme: "midnight",
fontScale: 1.06,
bgImage: true,
bgFade: 60,
};
export function applyTheme(t: ThemePrefs): void {
@ -32,6 +35,7 @@ export function applyTheme(t: ThemePrefs): void {
el.dataset.theme = t.mode;
el.dataset.scheme = t.scheme;
el.style.setProperty("--font-scale", String(t.fontScale));
if (typeof t.bgFade === "number") el.style.setProperty("--bg-fade", `${t.bgFade}%`);
}
export function loadLocalTheme(): ThemePrefs {