Why Your App Should Have Both Dark And Light Themes

Reading time: about 3 minutes

Published

Your App Should Have Both Dark And Light Themes
a11y Android

You might have heard that your app should have a dark theme available. Some say it's because of preference, but it's actually also an accessibility thing.

This blog post itself doesn't have the code to enable dark and light themes for the user. Instead, it explains why having both of them is essential and provides further reading on the topic — yes, with links to some code and instructions as well.

Accessibility of Dark and Light Themes

Many people use everything they can in a dark theme. After all, staring at screens for a long time might be easier if the user interface uses darker colors. Using a dark theme instead of a light one also saves some battery.

However, many people choose to use the dark theme because it is more accessible for them. For example, some vision issues might cause discomfort because of light or even wash out the rest of the person's vision. A white (or similar) background behind the text can cause these issues. Another reason is that dark themes often have better contrast (if they're designed properly).

Now, if the dark theme is so great, why not just have the dark theme for the app and forget about the light theme? While dark theme is more accessible for many, some people benefit from light theme. For example, people with astigmatism may find light theme more accessible, and people with dyslexia might prefer light mode for readability. For reference, see, for example, this article: Dark mode: How accessible design raises the bar - Layth Sihan

Luckily, defining light and dark themes in modern Android development is straightforward. Let's discuss the technical considerations of light and dark themes next.

Technical Considerations

Starting from Android 10 (SDK 29), there is a system setting for switching between dark and light modes. If you define your themes correctly, your app will respect that system-wide setting by default.

To define a dark theme for your app using themes from XML files, follow the instructions in Android documentation: Implement dark theme. For apps using Jetpack Compose, the instructions are in Material Design 3 in Compose - Color scheme.

A handy tool for generating themes is Material Theme Builder, a web tool for defining themes. You can use the web UI to define the colors and then export the theme and the color definitions to import to your project. It provides exports for both Compose and XML, as well as for Flutter, web, and Material Tokens.

If you want to give the user more granular control and select the theme for your app different from the system setting, here's an article with a tutorial on how to do that with Jetpack Compose: Dark Theme Switch in Jetpack Compose with CompositionLocal - Sibel Nalop

I mentioned that dark themes might have better contrast if they're designed properly. So, when defining your theme colors for both light and dark themes, check for enough contrast between the background, texts, and other UI elements. The Material Design docs explain color contrast: Material Design 3: Accessible design—Color & Contrast.

Wrapping Up

In this blog post, I've discussed the accessibility of dark and light themes. As neither is the most accessible choice for all users, you should design and develop your apps to have both. They should either respect the user's system settings or have an in-app setting for switching between the themes.

Which do you personally prefer, the light or the dark theme? Do you select them app-by-app (if possible) or use the system-wide setting? And do you implement both for the apps you develop?

Links in the Blog Post

Comments