diff options
| -rw-r--r-- | FrontEnd/src/palette.ts | 6 | ||||
| -rw-r--r-- | FrontEnd/src/utilities/refreshAnimation.ts | 13 |
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; + }); + } + } + }); +} |