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

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

Go to the res > values > styles.xml file and change the style parent to “Theme.AppCompat.DayNight.DarkActionBar“. Below is the complete code for the 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

Go to the MainActivity.kt file, and refer the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

class MainActivity : AppCompatActivity() { 

    override fun onCreate(savedInstanceState: Bundle?) { 

        super.onCreate(savedInstanceState) 

        setContentView(R.layout.activity_main) 

  

        // Declare the switch from the layout file 

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

  

        // set the switch to listen on checked change 

        btn.setOnCheckedChangeListener { _, isChecked -> 

  

            // if the button is checked, i.e., towards the right or enabled 

            // enable dark mode, change the text to disable dark mode 

            // else keep the switch text to enable dark mode 

            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"

            } 

        } 

    } 

}

output: