From d11ccb45c481a784e0f3a100fad72d6e103cf803 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:24:50 +0300
Subject: [PATCH] M: Prevent animations for darkMode transitions

---
 .../frontend/src/context/ConceptOptionsContext.tsx  | 13 ++++++++++++-
 rsconcept/frontend/src/styling/styles.css           |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
index ffdd8416..2b149251 100644
--- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
+++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
@@ -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]);
 
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index f778a6f7..e95531fe 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -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);
   }
 }