Why Your App Should Have Both Dark And Light Themes

Posted on Mar 7 • Originally published at eevis.codes 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. 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 SihanLuckily, defining light and dark themes in modern Android development is straightforward. Let's discuss the technical considerations of light and dark themes next. 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 NalopI 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.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? Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Audu Ephraim - Jan 26 Ray - Jan 26 RippleTech - Feb 23 Christopher Alves - Feb 21 DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2024. We're a place where coders share, stay up-to-date and grow their careers.