We have joined the dark side!
Musixmatch just got revamped for iOS13 and Android Q.
With the introduction of dark mode on iOS 13 and Android Q, and being one of the most requested features, we had fun creating a dark mode for our mobile apps.
We immediately got hooked on the hype: a dark interface is easier on the eyes, whether you’re reading your favorite lyrics at nighttime or while singing along at a party. Additionally, dark mode really brings our lyrics into focus.
Behind the scenes
There were certain things that we needed to take care of: good readability is harder to achieve with light text on a dark background, especially with small font sizes and strong colors. Shadows aren’t visible and you can’t just invert their colors, which makes showing depth and elevation a tricky task to achieve.
We took the challenge to create a legible dark mode and seized the opportunity to render our design system more organized and adaptable. The Material Design guidelines provide a solid base to start off. We defined a color palette that is functional but in tune with the look and feel of the app. We gave the palette a tiny tint of blue — which compliments our brand colors and lets them pop-out even more.
Alongside the colors, we also updated our type system following accessibility guidelines and added new usage rules that improve the sense of hierarchy. Finally, we added documentation on our design system not only about the usage of various elements, but also in which combination.
Dark mode led us to make our design system more flexible and adaptable for future changes, and we’re pretty proud of what we have achieved.
It’s starting to define how the design of Musixmatch is evolving, and we are super excited about what’s coming next!
On the dark side of the moon
I’ll be waiting, I’ll be waiting for you.
- Dark side of the moon by Pink Floyd
🚀 Musixmatch’s dark mode is already available in the latest iOS app version and it will be coming very soon on our Android app as well.
Are you enjoying the dark mode? Share your thoughts with us!
