Repository navigation
fix: wrap theme overrides in Starlight's cascade layer - #8
Merged
Merged
Conversation
The previous commit's :root override was unlayered CSS. Astro's customCss is injected unlayered by default, and unlayered CSS always wins over layered CSS regardless of selector specificity - Starlight's own theme rules live in @layer starlight.base, so my unscoped :root was beating its more-specific :root[data-theme='light'] rule for every property this file touches, breaking the light/dark switch. Nav bar correctly followed the theme (it uses --sl-color-bg-nav, which resolves through a primitive this file never touched), while the page body, sidebar, and search dialog all stayed dark regardless of the selected theme, since they resolve through --sl-color-black/-gray-*, which this file did override. Wrapping the same rules in @layer starlight.base restores normal cascade behavior: light mode's more specific selector now correctly wins when active. Verified both themes, and the search dialog specifically, in an actual browser before pushing this time. Signed-off-by: Lukas Hirt <info@hirt.cz>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The theme colors merged in the previous PR were unlayered CSS, which always beats Starlight's own layered rules regardless of selector specificity. That broke the light/dark toggle: the nav bar followed the theme correctly (untouched by my override), but the page body, sidebar, and search dialog stayed dark in light mode. Wrapping the same rules in Starlight's own @layer restores normal cascade behavior. Verified both themes and the search dialog in an actual browser before pushing.