On the way to add dark mode

Hey there, Memoiri users! I've been getting a lot of feedback lately about the lack of a dark mode feature in the app, so I've taken it upon myself to add this functionality in the next update. As I started working on this, I quickly realized that I had made a critical mistake when initially designing the app. I didn't take text styling and color into account. As a result, I faced some issues when trying to implement dark mode. In this post, I'm going to share my experience with you and explain how I overcame these obstacles.

Adding Dark Mode to Memoiri: My Experience with Text Styling and Colors When I first decided to add dark mode to Memoiri, I thought it would be a breeze. After all, I'm using Flutter as the backbone of my app, and it has a convenient MaterialApp Widget that allows you to switch themes with just a few lines of code. All you have to do is add

themeMode: ThemeMode.system

 and the app should automatically change to dark mode when the phone's theme changes. I was wrong.

As soon as I updated this little setting, I ran into a significant issue. I had explicitly colored text and some images with white backgrounds throughout the app, which made it nearly impossible to see when using dark mode. I realized that I had to go through every single page of the app and update the text and images to work correctly with both light and dark modes.

This experience taught me a valuable lesson: never start coding without taking future considerations into account. It's essential to plan for potential changes in the future, like adding a dark mode feature, to avoid making more work for yourself down the road.

To solve this issue, I decided to use

Theme.of(context)

to manage all text styles and colors. I highly recommend this approach to everyone who's developing an app from scratch. Styling your text using a theme allows you to centralize everything on your main widget and define everything from there using MaterialApps darkTheme and theme properties. This approach ensures that all text and colors will work correctly, regardless of the mode the app is in.

In conclusion, adding dark mode to Memoiri was a bit more complicated than I initially anticipated. However, the experience taught me a valuable lesson about taking future considerations into account when designing an app. I hope this post has helped you avoid making the same mistake I did and given you some useful tips on how to manage text styles and colors in your app.

You may also like