https://github.com/rudrodip/theme-toggle-effect
theme toggle effect using view transitions api
https://github.com/rudrodip/theme-toggle-effect
theme-toggle view-transitions-api
Last synced: 3 months ago
JSON representation
theme toggle effect using view transitions api
- Host: GitHub
- URL: https://github.com/rudrodip/theme-toggle-effect
- Owner: rudrodip
- Created: 2024-06-23T12:39:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-20T04:26:50.000Z (11 months ago)
- Last Synced: 2025-03-31T13:15:39.209Z (3 months ago)
- Topics: theme-toggle, view-transitions-api
- Language: HTML
- Homepage: https://theme-toggle.rdsx.dev
- Size: 1.73 MB
- Stars: 361
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Theme toggle effect
Here's how we can create theme toggle effect using view transitions api
This is literally the two lines of js you need
```js
if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);
```
Then you can write your css as you wish to
For example
```css
::view-transition-group(root) {
animation-timing-function: var(--expo-out);
}
::view-transition-new(root) {
mask: url('data:image/svg+xml,') center / 0 no-repeat;
animation: scale 1s;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
animation: none;
z-index: -1;
}
.dark::view-transition-new(root) {
animation: scale 1s;
}
@keyframes scale {
to {
mask-size: 200vmax;
}
}
```
This will create a nice circular transition effect when you switch themes.
For more examples, visit [theme-toggle.rdsx.dev](https://theme-toggle.rdsx.dev)
Don't forget to star the repo if you like it
Follow me on [x (twitter)](https://x.com/rds_agi) & [github](https://github.com/rudrodip)