Android 10 Dark Theme: Getting Started

Elevation

In Android, elevation is the distance between the view and its parent on the z-axis. You use it to show the importance of some view on-screen by making it visually closer to the user and to give a hint to the user that they can interact with the view.

In light themes, a shadow represents the elevation. As the elevation goes up, the shadow becomes wider.

In the dark theme, you'll probably have some dark color in the background, which makes the shadow hard to see.

To solve this problem, you use an elevation overlay.

As the surface rises on the z-axis, the surface color changes, as if there was a semi-opaque white layer on top of it. This layer gets more opaque as you rise in elevation. It blends down the color and uses it as a tint on the background color.

All of the components in the Material design components support this out of the box. While it's out of the scope of this article, you can build this behavior into your own custom components.

WebView

WebView works seamlessly with Force Dark by applying dark theme to web content as well. If the WebView parent view is being automatically force darkened, then the WebView's content will be displayed so as to emulate a dark theme. Only WebViews attached to the view hierarchy will be inverted.

Lottie Animations

Lottie Animations do not use color resources. Instead, colors are changed at runtime using dynamic properties by inlining them in JSON files.

You can check out Lottie's official documentation to see how that is done.

Maps

MapView doesn't support dark theme out of the box, but it supports custom map styling functionality. This lets you specify the colors of a map via JSON file. You utilize this feature by adding different JSON files to the raw-night folder used in dark mode.

Notifications

Notification templates support dark theme out of the box. If you're using a custom layout for your notification, then you add dark theme support by using the same styling techniques that you use for a regular layout.

Where to Go From Here?

Good job finishing the tutorial! You learned how to add dark theme support to your app and how to make it backward-compatible.

To learn more about dark theme, check out our Supporting Dark Theme video course or you can check out the official Android documentation.

I hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!