romtuck/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: simplify theme transition to clean crossfade

Browse Source
This commit is contained in:
mousberg 2026-01-25 14:59:55 +00:00
parent 26148786d9
commit 31a3cbea85
No known key found for this signature in database
GPG Key ID: 77CB69F74890FF9C
1 changed files with 8 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/src/styles/base.css
View File

@ -214,36 +214,17 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* Theme transition */ /* Theme transition - clean crossfade */
@keyframes theme-circle-transition { ::view-transition-old(root),
0% { ::view-transition-new(root) {
clip-path: circle(0% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%)); animation-duration: 0.15s;
} animation-timing-function: ease-out;
100% {
clip-path: circle(150% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%));
}
}
html.theme-transition {
view-transition-name: theme;
}
html.theme-transition::view-transition-old(theme) {
mix-blend-mode: normal;
animation: none;
z-index: 1;
}
html.theme-transition::view-transition-new(theme) {
mix-blend-mode: normal;
z-index: 2;
animation: theme-circle-transition 0.4s var(--ease-out) forwards;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html.theme-transition::view-transition-old(theme), ::view-transition-old(root),
html.theme-transition::view-transition-new(theme) { ::view-transition-new(root) {
animation: none !important; animation: none;
} }
} }