fix(theme): persist dark/light mode across view transitions#11338
Open
fix(theme): persist dark/light mode across view transitions#11338
Conversation
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🟢 🤖 Continuous IntegrationWonderful, this rule succeeded.
🟢 👀 Review RequirementsWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 🔎 ReviewsWonderful, this rule succeeded.
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
This PR fixes loss of dark/light theme classes during Astro ClientRouter view transitions by reapplying the theme to the incoming <html> element before the swap, preventing post-navigation flashes and keeping theme selectors consistent.
Changes:
- Refactors the inline FOUC-prevention theme initializer to an
applyTheme()helper and re-runs it onastro:before-swapagainstevent.newDocument.documentElement. - Applies/removes both
theme-darkanddarkclasses for parity with existing CSS/selectors. - Adds Vitest coverage by extracting and executing the exact inline script from
HeadCommon.astro, including regression tests for view transitions.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/HeadCommon.astro | Reapplies theme classes on astro:before-swap so <html> swaps retain correct theme without flashing. |
| src/components/HeadCommon.test.ts | Adds tests that execute the shipped inline theme script and cover swap-time reapplication behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Theme classes (theme-dark, dark) were lost on every navigation because ClientRouter swaps the <html> element and the server renders it with class="initial". The inline FOUC-prevention script only runs on initial page load (Astro deduplicates identical inline scripts across navigations), so nothing reapplied the theme after a swap. Re-run the theme detection on astro:before-swap, applying the classes to event.newDocument.documentElement so the swap completes with the correct theme and no flash. Also handle both `theme-dark` and `dark` classes for parity with ThemeToggleButton, since theme.css uses both selectors. Change-Id: I0b1115aac90e5944bac2d5ca6ea746b2273f1c05
jd
force-pushed
the
devs/jd/worktree-bug-theme/persist-dark-light-mode-across-view-transitions--0b1115aa
branch
from
a5c7f76 to
6464a56
Compare
Member
Author
Revision history
|
JulianMaurin
approved these changes
Apr 30, 2026
kozlek
approved these changes
Apr 30, 2026
Contributor
Merge Queue Status
This pull request spent 2 minutes 42 seconds in the queue, including 2 minutes 27 seconds running CI. Waiting for:
All conditions
ReasonThe merge conditions cannot be satisfied due to failing checks Failing checks: HintYou may have to fix your CI before adding the pull request to the queue again. |
51 tasks
Member
Author
|
@Mergifyio queue |
Contributor
Merge Queue Status
This pull request spent 23 seconds in the queue, with no time running CI. ReasonThe draft pull request cannot be created HintIf you want to requeue this pull request, you can post a |
Member
Author
|
@Mergifyio queue |
Contributor
Merge Queue Status
|
51 tasks
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
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.
Theme classes (theme-dark, dark) were lost on every navigation because
ClientRouter swaps the element and the server renders it with
class="initial". The inline FOUC-prevention script only runs on initial
page load (Astro deduplicates identical inline scripts across
navigations), so nothing reapplied the theme after a swap.
Re-run the theme detection on astro:before-swap, applying the classes
to event.newDocument.documentElement so the swap completes with the
correct theme and no flash. Also handle both
theme-darkanddarkclasses for parity with ThemeToggleButton, since theme.css uses both
selectors.