ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues 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:50 +03:00
parent 7bd5cd5d74
commit d11ccb45c4
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(() => { 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]);

2
rsconcept/frontend/src/styling/styles.css
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);
} }
} }