fix: Real fix #624.

2 files changed, 18 insertions, 1 deletions

diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index da1e133f..ab3d6b54 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -1,6 +1,8 @@
 import Color from "color";
 import { BehaviorSubject, Observable } from "rxjs";
 
+import refreshAnimation from "./utilities/refreshAnimation";
+
 function lightenBy(color: Color, ratio: number): Color {
   const lightness = color.lightness();
   return color.lightness(lightness + (100 - lightness) * ratio);
@@ -83,7 +85,7 @@ export function generatePaletteCSS(palette: Palette): string {
     }
   }
 
-  return `html {${colors
+  return `:root {${colors
     .map(([key, color]) => `${key} : ${color};`)
     .join("")}}`;
 }
@@ -110,6 +112,8 @@ palette$.subscribe((palette) => {
       styleTag.parentElement?.removeChild(styleTag);
     }
   }
+
+  refreshAnimation();
 });
 
 export function setPalette(palette: Palette): () => void {
diff --git a/FrontEnd/src/utilities/refreshAnimation.ts b/FrontEnd/src/utilities/refreshAnimation.ts
new file mode 100644
index 00000000..ba501107
--- /dev/null
+++ b/FrontEnd/src/utilities/refreshAnimation.ts
@@ -0,0 +1,13 @@
+export default function refreshAnimation(): void {
+  document.body.querySelectorAll("*").forEach((e) => {
+    if (e instanceof HTMLElement) {
+      const an = getComputedStyle(e).animationName;
+      if (an !== "none") {
+        e.style.animationName = "none";
+        setTimeout(() => {
+          e.style.animationName = an;
+        });
+      }
+    }
+  });
+}