Day Night Theme For Night Mode In Android

In this tutorial, we will discuss and learn, how to use DayNight theme of an Android in your Android Application to enable.

A new theme has been added by Android to AppCompat Theme.AppCompat.DayNight with support library 23.2.0. This enables the user to toggle switch between night mode and day mode. This feature can be very useful if you have a reading application in your android app, let start with implementing night mode in android.

AppCompatDelegate

AppCompatDelegate is a class which represents a delegate which you can use to extend AppCompat’s support to any Activity.

It takes one of the following methods:-

MODE_NIGHT_YES – It enables night/dark theme.
MODE_NIGHT_NO – It enables the day/light theme.
MODE_NIGHT_FOLLOW_SYSTEM – It is the default option. Uses the system’s settings to determine the time of day and toggles NightMode accordingly.
MODE_NIGHT_AUTO – Changes between day/night based on the time of day.

Must Read: Google Login And Registration For Android Using Firebase Authentication

Follow the below steps to add this functionality in your Application:-

ADD THEME Open styles.xml by app>res>values>styles.xmlAdd parent=“Theme.AppCompat.DayNight.DarkActionBar”

Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

2. Add Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <Switch
        android:id="@+id/switch_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DARKMODE TUTORIAL"
        android:layout_gravity="center"
        android:textSize="30dp"
        android:layout_marginTop="50dp"/>


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:layout_marginTop="50dp"/>

</LinearLayout>

3. Add MainActivity.java

package com.example.darkmode;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatDelegate;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;

import com.mahfa.dnswitch.DayNightSwitch;
import com.mahfa.dnswitch.DayNightSwitchListener;

public class MainActivity extends AppCompatActivity {

    Switch aSwitch;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        aSwitch=findViewById(R.id.switch_toggle);
        aSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
           @Override
           public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
               if(isChecked)
               {
                   //if day mode is enabled, set night mode using AppCompatDelegate class.
                   Toast.makeText(MainActivity.this, "Night selected", Toast.LENGTH_SHORT).show();
                   getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_YES);
           }
           else {
                   //if night mode is enabled, set day mode using AppCompatDelegate class.
                   Toast.makeText(MainActivity.this, "Day mode selected", Toast.LENGTH_SHORT).show();
                   getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_NO);

                }
            }
        });
    }
}

Now, you are ready to run your application.

When you will run, you can see your application like this:-