Circular reveal when switching the theme - #275
Merged
Merged
Conversation
…utton Picking a theme in the popover now switches inside a same-document view transition: the new theme is revealed through a circle that grows from the theme button. The nav/page transition names from the tab transitions are suspended for the duration so the whole page is one snapshot. Initial load, OS theme changes, reduced motion, unsupported browsers and no-op switches still apply the theme instantly. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
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.
What
Choosing Light, Dark or System in the theme popover now plays a circular reveal: the new theme grows out of the theme button as an expanding circle over the old one.
Demo
The GIF is 11 real frames of the transition, captured by pausing the animation and stepping through it in roughly 70 ms increments, so it plays back slower than the real 0.6s animation.
How
theme.js: a theme picked by the user goes throughapplyThemeWithReveal, which wraps the existingapplyThemeindocument.startViewTransitionand animatesclip-path: circle(...)on::view-transition-new(root)from the button's center out to the farthest corner. It applies instantly (as before) on initial load, on OS theme changes, when the effective light/dark theme would not change (e.g. System while already matching), whenprefers-reduced-motionis set, and in browsers without view transitions.styles.css: while the transition runs,html[data-theme-reveal]turns off the default root cross-fade and drops theview-transition-names that the tab-navigation transitions use, so the whole page (header, content, charts) is a single snapshot that the circle reveals.CHANGELOG.md: added the entry.Independent of #274 (the timeline image fix); it builds on the view-transition CSS already on master.
Testing
Built the image from this branch and ran it against a local Postgres. In Chrome I switched Light to Dark to Light: the theme changes, the
data-theme-revealmarker is set during the switch and removed afterwards,localStorageis updated and there are no console errors. I also froze the animation mid-way and checked a screenshot: the dark theme is revealed through a circle centred on the theme button, including the nav and the charts.I have not checked it in Safari. No automated tests added (browser-only behaviour).
🤖 Generated with Claude Code