Skip to content

Commit 78cd186

Browse files
committed
Adapt overlay tokens to theme bg luminance for light Omarchy themes
bg-secondary, bg-surface, bg-elevated, bg-hover, border, and border-focus all used rgba(255,255,255,...) overlays tuned for dark backgrounds. On a light Omarchy theme they vanished, leaving the UI flat and panels indistinguishable from the main bg. Detect bg luminance and switch overlays to rgba(0,0,0,...) when light. Derive bg-secondary as a small contrasting shift of bg-primary so panels stay visually layered.
1 parent b44d1a7 commit 78cd186

2 files changed

Lines changed: 75 additions & 4 deletions

File tree

frontend/index.html

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,52 @@
2020
);
2121
}
2222
if (colors.background) {
23+
// Match overlay tokens to bg luminance so panels,
24+
// hovers, and borders stay visible on light themes.
25+
var bgHex = colors.background.replace('#', '');
26+
var br = parseInt(bgHex.slice(0, 2), 16);
27+
var bgg = parseInt(bgHex.slice(2, 4), 16);
28+
var bb = parseInt(bgHex.slice(4, 6), 16);
29+
var isLightBg =
30+
(br * 299 + bgg * 587 + bb * 114) / 1000 > 128;
31+
var shift = isLightBg ? -10 : 10;
32+
var clamp = function (n) {
33+
return Math.max(0, Math.min(255, n));
34+
};
35+
var ov = isLightBg ? '0,0,0' : '255,255,255';
2336
root.style.setProperty(
2437
'--color-bg-primary',
2538
colors.background
2639
);
2740
root.style.setProperty(
2841
'--color-bg-secondary',
29-
colors.background
42+
'rgb(' +
43+
clamp(br + shift) +
44+
',' +
45+
clamp(bgg + shift) +
46+
',' +
47+
clamp(bb + shift) +
48+
')'
49+
);
50+
root.style.setProperty(
51+
'--color-bg-surface',
52+
'rgba(' + ov + ',' + (isLightBg ? 0.03 : 0.04) + ')'
53+
);
54+
root.style.setProperty(
55+
'--color-bg-elevated',
56+
'rgba(' + ov + ',' + (isLightBg ? 0.06 : 0.07) + ')'
57+
);
58+
root.style.setProperty(
59+
'--color-bg-hover',
60+
'rgba(' + ov + ',' + (isLightBg ? 0.04 : 0.05) + ')'
61+
);
62+
root.style.setProperty(
63+
'--color-border',
64+
'rgba(' + ov + ',' + (isLightBg ? 0.1 : 0.08) + ')'
65+
);
66+
root.style.setProperty(
67+
'--color-border-focus',
68+
'rgba(' + ov + ',' + (isLightBg ? 0.2 : 0.18) + ')'
3069
);
3170
document.body.style.background = colors.background;
3271
}

frontend/src/App.svelte

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -268,17 +268,49 @@
268268
root.style.setProperty(`--aether-${name}`, value);
269269
}
270270
if (colors.background) {
271+
const bg = hexToRgb(colors.background);
272+
// Luma threshold matches isLightColor() — a light
273+
// omarchy theme needs dark scrim/border overlays, a
274+
// dark theme needs the white-on-dark defaults.
275+
const isLightBg =
276+
(bg.r * 299 + bg.g * 587 + bg.b * 114) / 1000 > 128;
277+
const shift = isLightBg ? -10 : 10;
278+
const clamp = (n: number) =>
279+
Math.max(0, Math.min(255, n));
280+
const bg2r = clamp(bg.r + shift);
281+
const bg2g = clamp(bg.g + shift);
282+
const bg2b = clamp(bg.b + shift);
283+
const overlay = isLightBg ? '0, 0, 0' : '255, 255, 255';
271284
root.style.setProperty(
272285
'--color-bg-primary',
273286
colors.background
274287
);
275288
root.style.setProperty(
276289
'--color-bg-secondary',
277-
colors.background
290+
`rgb(${bg2r}, ${bg2g}, ${bg2b})`
291+
);
292+
root.style.setProperty(
293+
'--color-bg-surface',
294+
`rgba(${overlay}, ${isLightBg ? 0.03 : 0.04})`
295+
);
296+
root.style.setProperty(
297+
'--color-bg-elevated',
298+
`rgba(${overlay}, ${isLightBg ? 0.06 : 0.07})`
299+
);
300+
root.style.setProperty(
301+
'--color-bg-hover',
302+
`rgba(${overlay}, ${isLightBg ? 0.04 : 0.05})`
303+
);
304+
root.style.setProperty(
305+
'--color-border',
306+
`rgba(${overlay}, ${isLightBg ? 0.1 : 0.08})`
307+
);
308+
root.style.setProperty(
309+
'--color-border-focus',
310+
`rgba(${overlay}, ${isLightBg ? 0.2 : 0.18})`
278311
);
279312
document.body.style.background = colors.background;
280-
const rgb = hexToRgb(colors.background);
281-
WindowSetBackgroundColour(rgb.r, rgb.g, rgb.b, 255);
313+
WindowSetBackgroundColour(bg.r, bg.g, bg.b, 255);
282314
}
283315
if (colors.foreground) {
284316
root.style.setProperty(

0 commit comments

Comments
 (0)