How to Check if An App is In Dark Mode and Change it To Light Mode in Android?
Last Updated :
07 Jun, 2023
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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:gravity = "center"
tools:context = ".MainActivity" >
< 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
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)
if (isDarkModeOn()){
tv_displayMode.text= "This App is in Dark Mode,Click the below button to change into Light Mode"
btn_changeToLightMode.visibility=View.VISIBLE
btn_changeToLightMode.setOnClickListener {
changeToLightMode()
}
} else {
tv_displayMode.text= "This App is already in Light Mode."
}
}
fun isDarkModeOn(): Boolean {
val nightModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
val isDarkModeOn = nightModeFlags == Configuration.UI_MODE_NIGHT_YES
return isDarkModeOn
}
fun changeToLightMode(){
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...