Compose Theme: Animated colors switching from light to dark mode
In this article I’ll explain how to switch from light to dark mode and viceversa, smoothly than usual using animated colors.
Part II: How to change light and dark mode dynamically with SharedFlow
Compose already provides a way to set dark or light palette colors, as shown in the documentation, it’s possible to set the colors in the MaterialTheme .
To get the result it is necessary to create an animateColor function that creates animation for Color type:
Using animateColorAsState, the animation will run automatically on the specific targetValue and the duration, in this case, is two seconds.
Now, we have to animate all the colors of Colors object used by MaterialTheme , with an extension function we create a switch :
Now, we have just to apply the switch to the palette colors:
Calling MyTheme with darkTheme param, we can dynamically update the theme getting a more smoothly result.
The complete implementation:
In the following repository, you can find the completed runnable implementation:
You can find a branch with the implementation of Material 3.
Thank you, I hope you enjoyed reading it.
