How to Check if An App is In Dark Mode and Change it To Light Mode in Android?
In this article, we are going to first check whether the application is in Dark mode or not it the app is in Dark mode then we have to change the app to light mode. A sample video is given below to get an idea about what we are going to do in this article.
Here we have to simply follow two steps.
1. Check if dark mode is enabled:
val DarkModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK// Retrieve the Mode of the App.
val isDarkModeOn = DarkModeFlags == Configuration.UI_MODE_NIGHT_YES//Check if the Dark Mode is On
2. Change to light mode if dark mode is enabled:
if (isDarkModeOn) {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)//Switch off the dark mode.
}
Step-by-Step Implementation
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 and select the language as Kotlin.
Step 2: Change the StatusBar Color
Navigate to app > res > values > themes > themes.xml and add the below code under the style section in the themes.xml file.
<item name="android:statusBarColor" tools:targetApi="l">#308d46</item>
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. It represents the main UI of our App, the UI Contains one TextView to display whether the app is in dark mode or in light mode, then a Button to change the mode to Light mode.
activity_main.xml File:
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--LinearLayout--> < 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" android:orientation = "vertical" android:gravity = "center" tools:context = ".MainActivity" > <!--TextView--> < TextView android:id = "@+id/tv_modeDisplay" android:textStyle = "bold" android:gravity = "center" android:textColor = "#308d46" android:padding = "10dp" android:textSize = "18dp" android:layout_width = "wrap_content" android:layout_height = "wrap_content" /> <!--Button--> < Button android:id = "@+id/btn_changeToLightMode" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Change to Light Mode" android:visibility = "gone" tools:visibility = "visible" android:layout_marginTop = "15dp" /> </ LinearLayout > |
Step 4: Working with the MainActivity.kt file
Go to the MainActivity.kt and follow the below code. Below is the code for the MainActivity.kt. Comments are added inside the code to understand the code in more detail. In this activity we are going to check if the app is in dark mode or not if in dark mode then we are going to change it to Light mode.
MainActivity.kt File:
Kotlin
package com.example.gfg import android.content.res.Configuration import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.Button import android.widget.TextView import androidx.appcompat.app.AppCompatDelegate import kotlin.properties.Delegates class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) val tv_displayMode:TextView=findViewById(R.id.tv_modeDisplay) val btn_changeToLightMode:Button=findViewById(R.id.btn_changeToLightMode) // Check if the app is in dark mode if (isDarkModeOn()){ // Display the message for dark mode tv_displayMode.text= "This App is in Dark Mode,Click the below button to change into Light Mode" btn_changeToLightMode.visibility=View.VISIBLE // Set Onclick listener for changing to light mode btn_changeToLightMode.setOnClickListener { changeToLightMode() } } else { tv_displayMode.text= "This App is already in Light Mode." } } // check if the app is in dark mode or not fun isDarkModeOn(): Boolean { val nightModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK val isDarkModeOn = nightModeFlags == Configuration.UI_MODE_NIGHT_YES return isDarkModeOn } // If the App is in Dark Mode then // change it to Light Mode fun changeToLightMode(){ AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) } } |
Output: