Sitemap
Android Developers

Articles on modern tools and resources to help you build experiences that people love, faster and easier, across every Android device.

Follow publication

Why support dark theme?

Quick start

#1: Change your theme

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

#2: Choose what mode to be in (optional)

Example in-app dark theme setting

#3: Test!

, which talks about preferring theme attributes:

Material Dark Theme

Grey vs black

Color palette

Recap on Material color system

Baseline Material color palettes
also wrote up a deep-dive on the color system here.

colorPrimary

colorSecondary

Surface colors

Don’t do this. Demo showing a bottom app bar with a vivid surface color

Use primary surface

<com.google.android.material.bottomappbar.BottomAppBar
style="Widget.MaterialComponents.BottomAppBar.PrimarySurface" />
<FrameLayout
android:background="?attr/colorPrimarySurface" />
Examples showing the PrimarySurface and styles and attribute

Branded surface color

How to calculate a branded surface color

Crafting dark theme example

’s video here, where he crafts a dark theme for the Reply Material Study app:

Theme structure which works well for dark themes
and I gave last year.

values/themes.xml
values-night/themes.xml

Elevation overlays

Demo showing elevation overlay at different elevation levels

Widget support

Custom views

OK Google, goodnight 🌚

--

--

Android Developers
Android Developers
Chris Banes
Chris Banes

Responses (5)