How to Create a Dark Mode for a Custom Android App in Kotlin

 How to Create a Dark Mode for a Custom Android App in Kotlin

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Changes made to styles.xml file

<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>

Step 3: Working with the activity_main.xml file

Now go to the activity_main.xml file which represents the UI of the application, and create a Switch. This switch shall toggle between the dark mode and normal mode. Below is the code for the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout 

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"> 

  

    <!--Create a switch-->

    <Switch

        android:id="@+id/switch1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="Enable dark mode"

        tools:ignore="UseSwitchCompatOrMaterialXml" /> 

  

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

class MainActivity : AppCompatActivity() { 

    override fun onCreate(savedInstanceState: Bundle?) { 

        super.onCreate(savedInstanceState) 

        setContentView(R.layout.activity_main) 

        val btn = findViewById<Switch>(R.id.switch1) 

  

        // set the switch to listen on checked change 

        btn.setOnCheckedChangeListener { _, isChecked -> 

            if (btn.isChecked) { 

                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) 

                btn.text = "Disable dark mode"

            } else { 

                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) 

                btn.text = "Enable dark mode"

            } 

        } 

    } 

}

Screen output: