From: Oliver Sluke <22557015+oliversluke@users.noreply.github.com> Date: Thu, 9 Jul 2026 06:32:21 +0000 (+0200) Subject: webui: activate PrimeVue dark palette under the Access theme X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=54e070d94876aeb179ee3a70735dc230c3e045ae;p=thirdparty%2Ftvheadend.git webui: activate PrimeVue dark palette under the Access theme PrimeVue's darkModeSelector was set to [data-theme="dark"], a theme that was never shipped — the app's only dark theme is Access ([data-theme="access"]). So Aura's dark palette never activated, and teleported overlays (Select dropdown, MultiSelect, Datepicker, menus, the paginator rows-per-page popup) kept Aura's light surface — a white panel on the dark Access page. Our own components themed correctly because they use the --tvh-* tokens; the overlays use Aura's own component tokens (e.g. select.overlay.background) that primevue.css doesn't map, so they depended entirely on Aura's light/dark mode. Point darkModeSelector at [data-theme="access"] so Aura switches to its dark palette exactly when the Access theme is active; Blue and Gray stay light. Refresh the now-stale comments in main.ts and the EPG event drawer's surface override, which still described the old dark selector. Signed-off-by: Oliver Sluke <22557015+oliversluke@users.noreply.github.com> --- diff --git a/src/webui/static-vue/src/main.ts b/src/webui/static-vue/src/main.ts index dad71aabc..295e327d6 100644 --- a/src/webui/static-vue/src/main.ts +++ b/src/webui/static-vue/src/main.ts @@ -41,23 +41,26 @@ async function bootstrap() { options: { cssLayer: { name: 'primevue', order: 'tvh-base, primevue' }, /* - * Lock PrimeVue overlays (Select dropdown, paginator rows- - * per-page popup, MultiSelect, Datepicker, …) to Aura's light - * colorScheme regardless of the OS dark-mode setting. PrimeVue's - * default `darkModeSelector` is `'system'`, which evaluates - * `@media (prefers-color-scheme: dark)` and picks Aura's dark - * variant — emerging as a near-black `surface.900` overlay - * background that clashes with our light-only theme set. + * Activate Aura's dark palette exactly when the Access theme is + * on. PrimeVue's default `darkModeSelector` is `'system'`, which + * follows the OS `prefers-color-scheme`; we bind it to our own + * `data-theme` attribute instead, so PrimeVue's light/dark tracks + * the app's theme rather than the OS. Access is our only dark + * variant (tokens.css sets `[data-theme="access"]` to a + * #000/#1a1a1a white-on-dark palette + `color-scheme: dark`); the + * Blue and Gray themes are light and don't match, so Aura stays + * light for them. * - * Same convention as `tokens.css:23` (`color-scheme: light` - * forces native widget chrome to light): assume light today; - * a future dark theme would set `[data-theme="dark"]` on - * ``, simultaneously flipping native widgets (via the - * tokens.css commented future override) and PrimeVue - * overlays (via this selector) — single source of truth for - * "is the UI dark right now?". + * This is what makes teleported overlays (Select dropdown, + * MultiSelect, Datepicker, menus, the paginator rows-per-page + * popup) go dark under Access. They render into , outside + * any component's scoped CSS, and use Aura's own component tokens + * (e.g. `select.overlay.background`) rather than the `--tvh-*` + * tokens mapped in primevue.css — so without a matching + * `darkModeSelector` they keep Aura's light surface (white) on a + * dark page. */ - darkModeSelector: '[data-theme="dark"]', + darkModeSelector: '[data-theme="access"]', }, }, }) diff --git a/src/webui/static-vue/src/views/epg/EpgEventDrawer.vue b/src/webui/static-vue/src/views/epg/EpgEventDrawer.vue index eb8cf65e7..653e181ec 100644 --- a/src/webui/static-vue/src/views/epg/EpgEventDrawer.vue +++ b/src/webui/static-vue/src/views/epg/EpgEventDrawer.vue @@ -1373,11 +1373,11 @@ const flags = computed(() => { .epg-event-drawer__root.p-drawer { width: 480px; max-width: 100%; - /* Paint the drawer surface with theme tokens. PrimeVue's dark - * mode is keyed to `[data-theme="dark"]` (main.ts), not the - * Access theme, so without this the teleported drawer keeps - * PrimeVue's light default background under Access. Mirrors - * IdnodeEditor's `.idnode-editor__root.p-drawer`. */ + /* Pin the teleported drawer surface to the exact theme tokens. + * Aura's dark palette now activates under Access (main.ts + * darkModeSelector), but pinning here keeps the drawer surface + * identical to the app's --tvh-bg-surface rather than Aura's own + * dark shade. Mirrors IdnodeEditor's `.idnode-editor__root.p-drawer`. */ background: var(--tvh-bg-surface); color: var(--tvh-text); }