How To Build Dark Mode Theme In Android?

How To Build Dark Mode Theme In Android?
How To Build Dark Mode Theme In Android?

Introduction

The Material dark theme is used for creating an attractive and optimal functional dark mode theme in Android. It primarily consists of dark background colors and bright foreground colors for all UI elements as in textboxes, buttons, and icons. The Dark Theme in Android devices is compatible with Android version 10 and API version 29 and higher and macOS version 13 and higher.

Most of the tech-giants are using and promoting dark themes via their host products. These include the top-notch tech firms such as Facebook, Uber, Reddit, Twitter, WhatsApp, Instagram, YouTube, Samsung’s One UI, Apple’s iPad, iOS 13, and Android 10 or higher.

With this around 80% of the app, users are using dark theme mode, according to the latest statistical reports of the year 2021 by The Results. With more developer’s and designer’s coming up as dark theme developers even the old Android codebases are being updated with the dark theme. Some device manufactures such as Redmi has even overridden Android 8 for supporting the Android Dark theme.


Image Source: The Results

Target Components:

There are only selected Material components that support elevation overlays for enabling dark theme, as they need colourSurface for elevation:

  1. Menu bars
  2. Bottom Navigation
  3. Top App Bar
  4. Bottom App Bar
  5. Cards
  6. Dialog boxes
  7. Tabs
  8. Menu bar
  9. Navigation Drawer
  10. Switch
  11. Bottom sheets
  12. Buttons
  13. TextBoxes
  14.  CheckBoxes
  15. Spinner

Top benefits of the Android Dark theme:

  • Depending upon the screen technology of the Android Device, the dark theme reduces the power usage significantly.
  • For users that use Android devices for a prolonged period and suffer from optical issues such as bright light sensitivity and low vision, it improves visibility.
  • It makes the Android UI compatible with the various low-light intensity environments.
  • Not only to the Android system UI, but the dark theme is also applicable to the apps executing on the device.

Image Source: proAndroid.com

We can enable the Dark Theme in our Android devices with a version higher than Android 10 and API level 29, by using any of the following three ways:

  • Go to the System Settings, then select Display option, and then go to Theme, for enabling Dark Theme.
  • Slide down your screen and go to the Quick Settings tiled layout to toggle between light mode and dark mode using the button in the notification tray.
  • The Dark theme mode is automatically enabled if you turn on the Battery Saver mode on any Pixel device.

Steps to Add Dark Theme To Your App:

For adding a dark theme to your Android app, users need to add Material Components for Android (MDC) for backing up the support.

Step One: Edit the theme of the app
You need to switch the theme for extending from one of the Theme.MaterialComponents.DayNight themes:

blog banner 1
<style name="Theme.MyApp"
    parent="Theme.MaterialComponents.DayNight">
    <!-- Other theme attributes -->
</style>

Image Source: material.io

Step Two: Set the mode on your Android Device
This step is not mandatory but it allows users to back up the executing devices running on the Android version before 19. As we already know that the Android devices introduced before Android 10, don’t have a system-level dark theme setting, the apps have to provide an in-app setting for allowing users to choose the app theme.

While in the case of Android 10 and above, it allows the users to override the system settings and customise it according to their wish. For example, suppose if the user wants to use a scheduled dark theme for all his utility apps but at the same time for the social apps, he wants a constant dark theme, he can use the in-app mode to customise it.

Image Source: Mint

For facilitating this the AppCompat used by the MVC comes with an API for selecting the desired mode: AppCompatDelegate.setDefaultNightMode(). This method is mostly called at the very instance when the preference of the user changes.

Although, some of the device manufactures have made it possible to add a system-level dark theme to the devices which are running on Android version 9 or below. Alas, during runtime this can’t be determined.

Image Source: material.io

Step Three: Test for bugs
The basis of a dark-themed app is to test it out by launching trial runs on multiple apps, in each part of it by combining random activities together, and toggling between the dark and light theme. The usually encountered text includes light text on a light background.

Similarly for darker shade also, some of the hardcoded colours lack contrast, this makes their visibility almost negligible across dark backgrounds (shades such as grey, brown, blue, usually suffer this issue). Go through theme attributes in case you are using hard-coded colour values in any of your apps.

Frequently Asked Questions

Is the dark theme mode available on all Android Mobile phones?

The Android Dark Theme is accessible from Android 10 onwards, which implies you must use an API of level 29 or higher for implementing the Android Dark Theme. The Dark theme was implemented in the higher versions of Android to cut down the power usage by a significant amount, the amount of reduction varies for distinct screen technologies. One of the main uses of the dark theme was to enhance screen visibility for users with a relatively low vision and bright light sensitivity. Android version 8.0 and 9.0, do not come with the dark theme by default, but you can upgrade your Android version to use the dark theme.

Do I have to pay any charges for using or creating the Dark Mode Theme in Android?

No, you don’t have to pay any charges for using or creating the Dark Mode Theme in Android. In most of the Android 10 devices, by default, the Android Dark Theme is already enabled/ Even in the Android Studio, the library available for adding and testing the Dark theme is absolutely free, you just need to add the target library in the Build. Gradle file.

Is the Dark Mode Theme compatible with tablets?

Yes, the Dark Mode Theme is compatible with tablets, you will have to check the Android and API versions, they should be 10 or 29 or higher. If you want to enable Dark Mode on your tablet, follow the following steps
Go to Settings, search for Display mode, and select Night mode from it.
Tap on the Night mode option, and then toggle the switch to Turn on now. ​Users are also allowed to swipe down from the top of the screen and open the Quick Settings panel and tap the Night mode icon to turn it off or on instantly. The icon will turn blue when Night mode is turned on

How do we switch on dark mode?

To switch on the dark theme, follow the below-mentioned steps. Go to your device’s Settings app. Tap on the Accessibility accessibility option. Under the Display menu, turn on the Android Dark theme.

Are images and photos affected in the dark theme mode?

Dark Mode in Android makes sure that the images uploaded by the user stand out. Although in the dark mode, the image pixels and (R, B, G) values are unchanged, yet the view background is changed to black, which reduces the constraint on the viewer’s eyes.


Google Photos has now introduced a dark mode which is activated when the user enables the dark theme or night mode in his Android device. In the Google App, you won’t find any toggle option in the app’s setting menu and no updates come with any options for unsyncing it.

Conclusion

The prime reason for this increasing popularity of Android dark theme is its neutrality with the user’s eye. The same colour palette which is usually very bright has adverse effects on the user’s eyes, that’s why the dark theme is used for breaking the hue monotony and provides a soothing sensation to the user’s eyes.

Apart from this, the dark theme has become an integral component of UI design, every UI has two color plots now, this gives the software product-user more options and provides the designer with a wider working scope. Typically, designers come with some unique shades apart from the usual black, such as blue, green, brown are now the trending dark theme bases used by the app designers.

Want to learn how to build an Android App, visit our course pages to know more.

By Vanshika Singolia