Skip to content

Let the hero surface and the reader backdrop follow the theme on iOS - #299

Merged
joepio merged 1 commit into
mainfrom
hero-surface-follows-the-theme
Sep 10, 2026
Merged

Let the hero surface and the reader backdrop follow the theme on iOS#299
joepio merged 1 commit into
mainfrom
hero-surface-follows-the-theme

Conversation

@joepio

@joepio joepio commented Sep 10, 2026

Copy link
Copy Markdown
Member

Fixes #293.

The iOS-only variant of the hero surface and the reader backdrop (no blur, denser tint, from #282) wrote the light colours into its rules. As the last block in the stylesheet it beat the dark theme's own .hero::after rule at equal specificity, so on an iPhone in dark mode the search bar sat on a pale strip, exactly the reporter's screenshot. Regression from my own change.

Both colours are tokens now (--hero-surface-bg, --overlay-backdrop-bg, each with a -solid twin), defined in the light :root and redefined in the dark block next to the other theme tokens; the base rules and the iOS variant read the tokens. Behaviour on light themes and on non-iOS browsers is unchanged (same values).

The iOS-only variant of both (no blur, denser tint, #281) wrote the light
colours into its rules, and as the last block in the file it beat the dark
theme's own rules: on an iPhone in dark mode the search bar sat on a pale
strip and the reader's backdrop tinted the wrong way (#293). Both colours
are tokens now, defined for light and dark next to the other theme tokens,
with a -solid pair the iOS variant uses.
@joepio
joepio merged commit 2dcd969 into main Sep 10, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Header inkleuring in dark mode fout bij zoeken op organisatie

1 participant