UI: anchor dark popover material to the active app theme #104

Closed
opened 2026-09-25 17:23:10 +00:00 by kayg · 1 comment
Owner

Root cause

The application marks explicit dark themes with :root.is-dark; apps/web/src/lib/stores/settings-store.ts:126–135 sets the class. CalendarPopover’s dark material follows that class. FloatingSurface’s dark material in packages/ui/src/components/menu/FloatingSurface.svelte:474–481 is selected only by @media (prefers-color-scheme: dark).

If the app is set to Tokyo Night while the operating system remains in light mode, menus and Inspector retain FloatingSurface’s light alpha/filter values while CalendarPopover uses its dark values. The same UI theme then produces different recipes across anchored surfaces.

Expected

Select the shared dark material from the active app theme (is-dark or the equivalent semantic theme token), not the operating-system preference. Keep the established per-surface translucency and blur values unless visual review chooses a new shared recipe.

## Root cause The application marks explicit dark themes with :root.is-dark; apps/web/src/lib/stores/settings-store.ts:126–135 sets the class. CalendarPopover’s dark material follows that class. FloatingSurface’s dark material in packages/ui/src/components/menu/FloatingSurface.svelte:474–481 is selected only by @media (prefers-color-scheme: dark). If the app is set to Tokyo Night while the operating system remains in light mode, menus and Inspector retain FloatingSurface’s light alpha/filter values while CalendarPopover uses its dark values. The same UI theme then produces different recipes across anchored surfaces. ## Expected Select the shared dark material from the active app theme (is-dark or the equivalent semantic theme token), not the operating-system preference. Keep the established per-surface translucency and blur values unless visual review chooses a new shared recipe.
Author
Owner

Merged into dev at 19676b44 after Claude's screenshot review (shared overlay glass, lighter in both themes). Deploy status on #203.

Merged into dev at 19676b44 after Claude's screenshot review (shared overlay glass, lighter in both themes). Deploy status on #203.
kayg closed this issue 2026-09-26 20:39:12 +00:00
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#104
No description provided.