M: Prevent animations for darkMode transitions

This commit is contained in:
Ivan 2024-12-20 12:24:33 +03:00
parent f5b26db1ff
commit 0de6b17096
2 changed files with 13 additions and 2 deletions

View File

@ -100,14 +100,25 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
); );
const toggleDarkMode = useCallback(() => { const toggleDarkMode = useCallback(() => {
if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { if (!document.startViewTransition) {
setDarkMode(prev => !prev); setDarkMode(prev => !prev);
} else { } else {
const style = document.createElement('style');
style.innerHTML = `
* {
animation: none !important;
transition: none !important;
}
`;
document.head.appendChild(style);
document.startViewTransition(() => { document.startViewTransition(() => {
flushSync(() => { flushSync(() => {
setDarkMode(prev => !prev); setDarkMode(prev => !prev);
}); });
}); });
setTimeout(() => document.head.removeChild(style), PARAMETER.moveDuration);
} }
}, [setDarkMode]); }, [setDarkMode]);

View File

@ -223,6 +223,6 @@
.cc-animate-color { .cc-animate-color {
transition-property: color, background-color; transition-property: color, background-color;
transition-timing-function: var(--transition-bezier); transition-timing-function: var(--transition-bezier);
transition-duration: var(--duration-fade); transition-duration: var(--duration-select);
} }
} }