Android 다크 모드 적용하기

목차
Overview
0. 시작하기 전
1. 테마 권장 사항
2. 테마 선택 다이얼로그 만들기
3. 다크 모드 테마 설정
3-1. 색상
3-2. 이미지
4. 다크 모드를 적용한 브랜디
5. 결론

Overview

출시 이전 가칭 Android Q 버전이 2019년 9월 3일 Android 10 이란 네이밍으로 출시되었습니다.

Android 10 의 업데이트 중 저의 가장 큰 관심사는 바로 다크 모드입니다.

다크 모드를 활성화했을 때, 기존에는 일부 시스템에서만 테마가 변경되었는데, Android 10 으로 업데이트되며 애플리케이션에서도 다크 모드를 적용할 수 있게 되었습니다.

다크 모드를 활성화하면 배터리 효율성이 높아지고, 어두운 주변 환경에서 눈부심을 최소화할 수 있기 때문에 다크 모드를 선호하는 유저들이 많습니다.

자, 이제! 다크 모드를 브랜디 앱에 적용시켜 보겠습니다. 😊

🤙 다크 모드, 어두운 테마, 다크 테마 등 여러 단어를 다크 모드로 통칭

0. 시작하기 전

Android 10 에서 다크 모드 활성화하는 방법입니다.

(기기 정보는 Android 10, One UI Beta, 갤럭시s10e)

아래 스크린샷과 같이 알림창에서 다크 모드의 활성 상태를 변경할 수 있습니다.

1. 테마 권장 사항

Android 공식 문서(developer.android.com)에서는 사용자가 직접 테마를 선택하는 것을 권장합니다.

밝은 테마 - Light
어두운 테마 - Dark
시스템 기본 값 (권장 기본 옵션) - Default

여기서 시스템 기본 값은 Android 10 이상과 Android 9 이하에서 권장되는 옵션이 다릅니다.

Android 10 이상

시스템 기본 값 : 다크 모드 활성화 여부

Android 9 이하

시스템 기본 값 : 절전 모드 활성화 여부

Android 9 이하 버전에서는 다크 모드 활성화 여부 대신 절전 모드 활성화 여부로 테마를 변경합니다.

(기기 정보는 Android 9, One UI 1.5, 갤럭시노트10)

밝은 테마를 선택했을 땐, 다크 모드의 활성화 여부를 판단하지 않고 밝은 테마가 적용됩니다.

2. 테마 선택 다이얼로그 만들기

Android 공식 문서의 권장사항을 따라 사용자가 테마를 선택할 수 있도록 테마 선택 다이얼로그를 만들어 보겠습니다.

1. ThemeUtil 생성

테마를 전환하기 위해서는 아래 메서드를 호출해야 합니다. 이 함수는 시작된 Activity를 자동으로 다시 생성하여 테마를 전환해줍니다.

// ex) 나이트모드로 테마 설정
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

위의 setDefaultNightMode() 메서드의 사용을 편하게 하기 위해 Util 클래스를 만듭니다.

권장 사항에 따라 시스템 기본 값을 선택했을 때, Android 10 이상일 경우와 아닌 경우를 분기하여 테마를 적용할 수 있도록 합니다.

public class ThemeUtil {
    public static final String LIGHT_MODE = "light";
    public static final String DARK_MODE = "dark";
    public static final String DEFAULT_MODE = "default";

    public static void applyTheme(String themeColor) {
        switch (themeColor) {
            case LIGHT_MODE:
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                break;

            case DARK_MODE:
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                break;

            default:
                // 안드로이드 10 이상
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
                }
                // 안드로이드 10 미만
                else {
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY);
                }
                break;
        }
    }
}

2. 다이얼로그 생성

라디오 버튼 클릭 시, 해당하는 테마 값을 SharedPreference에 저장하고 테마를 전환합니다.

BrandiSession brandiSession = A.getBrandiSession();

String themeColor = ThemeUtil.LIGHT_MODE;
brandiSession.setThemeColor(themeColor);
ThemeUtil.applyTheme(themeColor);

3. Application에서 theme 지정

마지막으로, SharedPreference에 저장되어 있는 테마 값을 앱 실행 시에 확인하여 선택된 값으로 테마를 적용합니다.

BrandiSession brandiSession = A.getBrandiSession();

String themeColor = brandiSession.getThemeColor();
ThemeUtil.applyTheme(themeColor);

3. 다크 모드 테마 설정

이제, 다크 모드일 때의 색상과 이미지를 변경해보겠습니다 🥳

색상

다크 모드 일 때의 색상을 변경하기 위해서는 values-night/colors.xml 파일을 만들어 이 파일 안에 색상 값을 지정해주면 됩니다. 주의 사항으로는 values-night/colors.xml 에 정의될 수 있는 name은 values/colors.xml 에 정의된 name이어야 합니다.

res/values/colors 의 프로젝트 구조

라이트 모드 일 때 colors.xml 의 정의된 컬러를 사용하고, 다크 모드 일 때는 colors.xml (night) 에 정의된 컬러 사용합니다.

values/colors.xml

<color name="color_dark_000000_ffffff">#000000</color>
<color name="color_dark_e1e1e1_000000">#e1e1e1</color>
<color name="color_dark_4a4a4a_8f9097">#4a4a4a</color>
<color name="color_dark_4a4a4a_9e9e9e">#4a4a4a</color>

...

values-night/colors.xml

<color name="color_dark_000000_ffffff">#ffffff</color>
<color name="color_dark_e1e1e1_000000">#000000</color>
<color name="color_dark_4a4a4a_8f9097">#8f9097</color>
<color name="color_dark_4a4a4a_9e9e9e">#9e9e9e</color>

...