안드로이드 다크 모드
많은 앱 개발 초보자들이 잘 신경쓰지 못하는 부분이지만 앱 개발에서 사용자 경험을 향상시키는 중요한 요소 중 하나는 다크 모드의 지원으로 다크 모드는 눈의 피로를 줄이고 저조도 환경에서의 가독성을 높이며 배터리 수명을 연장하는 등의 장점을 제공하기에 다크모드를 사용하는 유저들이 많아
완성도 높은 앱을 제작하고 출시하기 위해서는 앱에서 다크 모드 관련 설정을 하는 것이 좋다
다크 모드 시작하기
1
2
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
</style>
우선 앱에서 다크 모드를 설정하기 위해서는 style에 Theme가 DayNight로 설정되어 있는 지 봐야한다 해당 코드처럼 뒷 부분에 DayNight이 있다면 잘 설정된 것으로
1
2
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
반대로 이것을 이용하여 위처럼 Light로 설정하게 된다면 앱에서 다크 모드를 지원하지 않을 수도 있다
다크 모드 시 적용할 view 색상
앞에서는 다크 모드를 시작하기 위한 기본 설정을 하였으니 다음으로는 다크 모드 시 보여줄 색상을 정하도록 하겠다
themes.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style name="BackgroundColor">
<item name="android:background">@color/white</item>
</style>
<style name="TextColor">
<item name="android:textColor">@color/text_black</item>
</style>
<style name="SubTextColor">
<item name="android:textColor">@color/sub_text</item>
</style>
<style name="SearchColor">
<item name="android:backgroundTint">#F4F4F4</item>
</style>
<style name="ImageColor">
<item name="android:tint">#19191B</item>
</style>
<style name="CardViewBackgroundColor">
<item name="android:backgroundTint">@color/white</item>
</style>
<style name="CardButtonBackgroundColor">
<item name="android:backgroundTint">@color/background_black</item>
</style>
themes.xml (night)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style name="BackgroundColor">
<item name="android:background">@color/background_black</item>
</style>
<style name="TextColor">
<item name="android:textColor">@color/white</item>
</style>
<style name="SubTextColor">
<item name="android:textColor">@color/white</item>
</style>
<style name="SearchColor">
<item name="android:backgroundTint">#3C3C3D</item>
</style>
<style name="ImageColor">
<item name="android:tint">@color/white</item>
</style>
<style name="CardViewBackgroundColor">
<item name="android:backgroundTint">@color/background_black</item>
</style>
<style name="CardButtonBackgroundColor">
<item name="android:backgroundTint">@color/white</item>
</style>
다크 모드 시 보여줄 색을 정하기 위해서는 위처럼 라이트 모드에서 적용할 색상과 다크 모드 시 보여줄 색상을 style로 정의한다음
1
2
3
4
5
6
7
<TextView
android:id="@+id/title"
android:text="Catcher in the Rye"
android:textSize="16sp"
style="@style/TextColor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
이렇게 색상 지정을 style로 해주면 된다
다크 모드 관련 코드들
이제 다크 모드를 사용하기 위한 모든가 끝났기에 번외 느낌으로 다크 모드와 관련된 코드에 대해 알아보자
1
2
3
4
5
6
val uiModeManager = getSystemService(Context.UI_MODE_SERVICE) as UiModeManager
if (/* 다크 모드 활성화 조건 */) {
uiModeManager.nightMode = UiModeManager.MODE_NIGHT_YES
} else {
uiModeManager.nightMode = UiModeManager.MODE_NIGHT_NO
}
해당 코드를 사용하면 조건에 따라 현재 모드를 바꿀 수 있으며
1
delegate.localNightMode = AppCompatDelegate.MODE_NIGHT_YES
또한 위 코드를 사용하여 앱 전체에서 다크 모드를 설정하는 것이 다크 모드가 필요한 액티비티별로 다크 모드를 설정/해제할 수도 있다
1
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
이 코드는 유저의 시스템 설정에 따라 다크 모드를 자동으로 활성화하거나 비활성화하게 만들어주는 코드로 주로
util.MyApplication
1
2
3
4
5
6
7
8
class MyApplication : Application() {
override fun onCreate() {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
super.onCreate()
}
}
1
2
<application
android:name=".util.MyApplication"
이렇게 앱 전체에서 사용될 수 있게 한다