ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

M: Prevent animations for darkMode transitions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
rsconcept/frontend/src/context/ConceptOptionsContext.tsx
View File

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

2
rsconcept/frontend/src/styling/styles.css
View File

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