[Android/Kotlin] darkmode 적용하기

안드로이드에서 darkmode(어두운 테마)는 Android 10 (API 레벨 29) 이상에서 제공되어지는 기능 중 하나인데요.

오늘은 안드로이드에서 다크모드를 적용하는 방법에 대해서 소개해드리겠습니다.

 

📌 activity_main.xml 화면 구성

Light 모드 / Dark 모드 / System 설정에 따라 변경할 수 있게 RadioButton을 만들어 주었습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/color_dark_ffffff_0000000"
    android:id="@+id/cl_background">

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="테마 설정"
        android:textSize="20sp"
        android:textColor="@color/color_dark_000000_ffffff"
        app:layout_constraintVertical_bias="0.3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

   <RadioGroup
       android:id="@+id/radioMode"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintVertical_bias="0.2"
       app:layout_constraintTop_toBottomOf="@id/txtTitle"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintBottom_toBottomOf="parent">
       <RadioButton
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Light"
           android:textColor="@color/color_dark_000000_ffffff"
           android:buttonTint="@color/colorAccent"
           android:id="@+id/rbLight"/>
       <RadioButton
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Dark"
           android:buttonTint="@color/colorAccent"
           android:textColor="@color/color_dark_000000_ffffff"
           android:id="@+id/rbDark"/>
       <RadioButton
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Default"
           android:buttonTint="@color/colorAccent"
           android:textColor="@color/color_dark_000000_ffffff"
           android:id="@+id/rbDefault"/>
   </RadioGroup>


</androidx.constraintlayout.widget.ConstraintLayout>

 

text의 색과 activity 배경색이 dark/light 모드에 따라 색을 변경해주기 위해서는 night의 color.xml이 추가로 필요합니다!

 

✔️values-night 폴더 추가해주기

values 오른쪽 클릭 -> New -> Directory -> .../app/src/main/res/values-night 추가해주기

 

✔️colors.xml (night) 추가해주기

values 오른쪽 클릭 -> New -> Values Resource File 

이때 Directory name을 values-night로 , File name을 color로 설정해주세요!

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_dark_000000_ffffff">#000000</color>
    <color name="color_dark_ffffff_000000">#ffffff</color>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

night/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_dark_000000_ffffff">#ffffff</color>
    <color name="color_dark_ffffff_000000">#000000</color>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

colors.xml 에서와 동일한 name으로 만들어 주고, darkmode시에 원하는 색을 지정해주시면 됩니다.

저는 name명을 알아보기 쉽게 {color_dark_light모드일때색상_dark모드일때색상} 으로 설정해주었습니다.

 

📌 MainActivity.kt

각각의 Radio 버튼을 클릭시 앱이 light/dark 모드가 될 수 있도록 Radio 버튼 Check 이벤트를 람다식으로 구현해주었습니다.

radioMode.setOnCheckedChangeListener { _, checkedId ->
            when(checkedId) {
                R.id.rbLight -> {
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
                }
                R.id.rbDark -> {
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
                }
                R.id.rbDefault -> {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
                    } else {
                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY)
                    }
                }
            }
        }

Light 모드 설정

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)

Dark 모드 설정

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

시스템 설정에 따라

API 29 부터 Darkmode가 지원되므로 Version에 따라 설정을 다르게 해줘야 합니다!

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
	//APP SDK 버전이 Q보다 클 때 (API 29 이상)
	AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
} else {
	//APP SDK 버전이 Q보다 작을 때 (API 29 미만)
	AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY)
}

 

 

📌 구현 화면

 

 

 

 

참고

Android 다크 모드 적용하기