How not trigger the animation when change Theme-CodePudding

I`m working on a little game, basically like this: https://sweardle.com/ and i have a dark theme and a light theme, I have, too, some animations that triggers when the Api sends the response (the div flip while change the background color if you match a letter). The problem: if i change the theme to dark/light ALL application is remounted what makes all animations retrigger. What can i do to change the theme from dark to light or light to dark whitout trigger the animation again? My application is using ReactJS and MUIV5

CodePudding user response：

I'm not sure how you implement your dark / light theme. I think the best way would be for you to use css variables to style your elements. Then when you change the theme you can just toggle some kind of theme="light" on your html element (or save / read a value from local storage), which in turn will update your css.

Example:


html[data-theme='light'] {
    --background-color: white;
    --text-color: blue;
}

html[data-theme='dark'] {
    --background-color: black;
    --text-color: yellow;
}

.your-element {
    background-color: var(--background-color);
    color: var(--text-color);
}

Maybe this here can also help you