dsh-text-color-adaptive

Recolors DSH label text from the actual brightness of whatever is behind it, so white text on a bright wallpaper stops washing out.

Built for the transparent-glass look (a wallpaper plus semi-transparent panels): the shipped dark-theme text color is a fixed near-white, and a live wallpaper keeps moving bright frames underneath it. This plugin measures that backdrop and picks a side — light text or dark text — instead of assuming one.

What it does

Every 0.9 s it samples the wallpaper layer (.we-layer, produced by dsh-plugin-wallpaper-engine) — an <img>, <video>, <canvas>, or a scene iframe reached through its own __wp.capture().

The frame is scaled to 64×36, the text column is averaged into one background color, and that color is blended with the active theme's glass surface to estimate what the glyphs actually sit on. It then picks the side with the higher contrast and pushes the color until it just clears 4.6:1.

It writes five tokens — --dsw-alias-label-primary, -secondary, -tertiary, -caption, -dimmed — plus a text shadow that runs opposite to the text color (dark text gets a light shadow and vice versa) as a safety net.

Switching sides is damped: the new side has to beat the current one by 1.15× on two consecutive samples, so a live wallpaper does not flicker.

When it cannot sample

No wallpaper layer, a frame that is not decoded yet, or a scene iframe that refuses __wp.capture() (cross-origin) — the plugin turns itself off completely (removes html[data-at-adaptive]) and leaves DSH's own colors untouched. It never leaves half an override behind.

Without the wallpaper plugin there is nothing to sample, and DSH's solid background needs no help; the plugin stays dormant.

Tuning

Constants at the top of client.js:

Constant	Default	Meaning
FLOOR	4.6	Target contrast for body text (WCAG AA is 4.5:1)
SURFACE_MIX	0.45	How much of the backdrop is glass surface; raise it if your glass is thicker
TICK_MS	900	Sampling interval
SWITCH_MARGIN / SWITCH_STABLE	1.15 / 2	Side-switch margin and stability count

Debug

In the browser console:

__dshAdaptiveText.state
// { active: true, side: 'light', primary: '#fbfcfe', wallpaperLuminance: 0.31 }
__dshAdaptiveText.refresh()   // sample again now
__dshAdaptiveText.dispose()   // restore DSH's own colors

Install

dsh plugin --profile web add dsh-text-color-adaptive

Uninstall

dsh plugin --profile web remove dsh-text-color-adaptive

__dshAdaptiveText.dispose() turns it off for the current page without uninstalling.

License

MIT