Member-only story
Our goal is straightforward: enable users to easily modify and track their dark mode preference within our application. Dark Mode, first unveiled at Google I/O 2019, has gained significant traction among both developers and users. Thankfully, integrating it into Jetpack Compose is remarkably simple — a pre-built code template is readily available when you create a new Jetpack Compose Android project. Let’s explore a few key steps to ensure a seamless user experience.
Material Theme Builder
It doesn’t matter if you’re a developer who doesn’t have a great sense of color or a veteran designer this tool is a super useful time saver.
It is for material 3 design library. You can simply select one of the predefined themes or add an image of your selection and let it generate the whole color palette. You can chose the colors on your own or fully randomise to go wild as well.
Also, you can get a better idea about what and how to use in the material theme builder from here.
Android Jetpack DataStore
Whenever we talk about user preferences that we need to persist, I was (ok maybe still) thinking about good old SharedPreferences. However there is a new cool kid in town to replace it for some good reasons that I won’t get into. Here is a great blogpost about that.
The main reason I loved the DataStore is that I can get a Flow of the data I want to observe which is what we need for the reactive nature of the dark mode preference change.
The official document is well enough. The next step will be the one we’ll see some code samples.
Koin
This is really just my preference. I enjoy using koin because of its simplicity and the fact that it is easy to debug as well as trace back.
It was no different for injecting the DataStore with the koin as well. Here is the first code piece of the post.
private val Context.dataStore…
