Dark theme android app

Question

I\'m trying to create a dark theme similar to the one in OxygenOS on OnePlus devices.

I changed the window background to black but the problem is the action

Answer 1

SIMPLEST SOLUTION

You can enable/disable dark theme just by:

1. enable dark theme:

   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
   

2. forcefully disable dark theme:

   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
   

3. set app theme based on mobile settings of dark mode, i.e. if dark mode is enabled then the theme will be set to a dark theme, if not then the default theme, but this will only work in version >= Android version Q

   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
   

Notes:

1. Your base theme for app/activity should be

"Theme.AppCompat.DayNight"

like

<style name="DarkTheme" parent="Theme.AppCompat.DayNight">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

2. Your res folder's names would end with -night so that different colors and images you can set for day and night themes like

drawable & drawable-night,
values & values-night

Answer 2

Replace these values in your colors.xml

<color name="colorPrimary">#101010</color>
<color name="colorPrimaryDark">#000000</color>

This would be enough to change the Toolbar's color.

---

If you don't want to change the whole app primary color (which seems it is what you were trying to do in the first place), try creating a new Toolbar by:

Add this to your app's build.gradle

compile 'com.android.support:design:23.1.1'

Add this to your main layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="mx.evin.apps.startingtemplate.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/a_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/black"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

Set this in your styles (styles.xml):

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

And set the new toolbar (MainActivity.java).

Toolbar toolbar = (Toolbar) findViewById(R.id.a_main_toolbar);
setSupportActionBar(toolbar);

Answer 3

Implementing a dark theme (or black theme) is very easy today thanks to

Theme.DayNight and AppCompatDelegate

Android comes to us allowing us to declare

night/colors.xml

and

night/styles.xml

Full example here: https://github.com/android/user-interface-samples/tree/master/DarkTheme

Answer 4

In order to support Dark Theme first thing you will need to do is to make sure your theme inherits from DayNight theme.

After you’re done, the theme should look like the following:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

Essentially the DayNight theme works with two directories - Light theme inside values directory and Dark inside values-night directory.

Therefore whenever you want to use different resource values, depending on the theme, you need to declare that resource in both above directories.

For instance you could create two different color resources like this:

values/colors.xml

<color name="colorPrimary">#f2f2f2</color>
<color name="colorPrimaryDark">#000000</color>
<color name="colorAccent">#29b6f6</color>

values-night/colors.xml

<color name="colorPrimary">#2e2f32</color>
<color name="colorPrimaryDark">#121212</color>
<color name="colorAccent">#90caf9</color>

That should be it, you can read about it in more detail on my blog

https://androidexplained.github.io/ui/android/material-design/2020/09/24/dark-mode.html

Answer 5

With the Material Components we can use two values folder i.e. values (for light theme) & values-night (for dark theme) or can also manage the dayNight theme with the styling using:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

For a Dark Action Bar a theme parent should be:

 parent="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"

To set Dark theme we can use this method of AppCompatDelegate

setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES);

More details on how this works with different API levels.