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
- * `<html>`, 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 <body>, 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"]',
},
},
})
.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);
}
projects / thirdparty / tvheadend.git / commitdiff
