이 페이지는 Cloud Translation API를 통해 번역되었습니다.

어두운 테마 구현

어두운 테마는 Android 10(API 수준 29) 이상에서 사용할 수 있습니다. 여기에는 다음과 같은 이점이 있습니다.

기기에 따라 전력 사용을 크게 줄입니다. 화면 기술입니다.
저시력 사용자 및 밝은 빛에 민감한 사용자에게 편리하도록 가시성이 향상됩니다.
조명이 어두운 환경에서 더 편하게 기기를 사용할 수 있습니다.

어두운 테마는 Android 시스템 UI 및 기기에서 실행되는 앱에 적용됩니다.

Android 10 이상에서 어두운 테마를 사용 설정하는 방법에는 세 가지가 있습니다.

설정 > 디스플레이 > 테마 어두운 테마를 사용 설정합니다
빠른 설정 타일을 사용하여 알림 표시줄에서 테마를 전환합니다. 표시됩니다.
Pixel 기기에서 절전 모드를 사용 설정하여 동시에 어두운 테마를 사용 설정하세요. 있습니다. 다른 기기에서는 이 동작이 지원되지 않을 수도 있습니다.

WebView 구성요소를 사용하여 웹 기반 콘텐츠에 어두운 테마를 적용하는 방법은 WebView의 웹 콘텐츠 어둡게 만들기를 참고하세요.

앱에서 어두운 테마 지원

어두운 테마를 지원하려면 앱의 테마를 설정하세요. 보통 다음 위치에 있습니다. res/values/styles.xml: DayNight 테마에서 상속:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

머티리얼 구성요소 다크 테마:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

이렇게 하면 앱의 기본 테마가 시스템 제어 야간 모드 플래그와 연결되어 를 사용하면 앱에 어두운 테마가 기본적으로 적용됩니다.

테마 및 스타일

밝은 테마에서 사용하도록 하드코딩된 색상이나 아이콘을 사용하지 마세요. 사용 테마 속성이나 야간에 자격을 갖춘 리소스를 사용하세요.

어두운 테마에는 두 가지 테마 속성이 가장 중요합니다.

?android:attr/textColorPrimary: 범용 텍스트 색상입니다. 그것은 밝은 테마에서는 검은색에 가깝고 어두운 테마에서는 흰색에 가깝습니다. 사용 안함 상태가 포함되어 있습니다.
?attr/colorControlNormal: 범용 아이콘 색상입니다. 사용 안함 상태가 포함되어 있습니다.

대신 머티리얼 디자인 사용 권장 구성요소(색상 테마 설정) 시스템(예: 테마) 속성 ?attr/colorSurface 및 ?attr/colorOnSurface 속성을 사용하여 쉽게 액세스할 수 있음 적절한 색상으로 변환합니다. 테마에서 이러한 속성을 맞춤설정할 수 있습니다.

앱 내에서 테마 변경

앱이 실행되는 동안 사용자가 앱 테마를 변경하도록 허용할 수 있습니다. 다음 권장되는 옵션입니다.

얕은 수면
어둡게
시스템 기본값 (권장되는 기본 옵션)

이러한 옵션은 AppCompat.DayNight 모드에 직접 매핑됩니다.

밝은 테마: MODE_NIGHT_NO
어두운 테마: MODE_NIGHT_YES
시스템 기본값: MODE_NIGHT_FOLLOW_SYSTEM

테마를 전환하려면 다음 단계를 따르세요.

API 수준 31 이상에서는 다음을 사용합니다. UiModeManager#setApplicationNightMode 드림 시스템이 앱이 실행하는 테마를 알 수 있도록 합니다. 이렇게 하면 시스템이 스플래시 화면 중에 테마를 변경할 수도 있습니다.
API 수준 30 이하에서는 다음을 사용합니다. AppCompatDelegate.setDefaultNightMode() 드림 테마를 전환합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

어두운 테마 강제 적용

Android 10에서는 개발자가 다음과 같은 기능을 사용하여 어두운 테마 강제 적용을 사용할 수 있습니다. DayNight 테마를 명시적으로 설정하지 않고 빠르게 어두운 테마를 구현할 수 있습니다.

어두운 테마 강제 설정은 밝은 테마의 앱의 각 뷰를 분석하고 어두운 테마를 적용합니다. 자동으로 표시할 수 있습니다. 어두운 테마 강제 적용과 네이티브 구현으로 어두운 화면과 있습니다.

앱에서 android:forceDarkAllowed="true"을(를) 설정하여 강제로 어둡게 기능을 사용하도록 선택해야 합니다. 액티비티의 테마입니다. 이 속성은 AndroidX에서 제공하는 밝은 테마(예: Theme.Material.Light) 사용하는 경우 강제로 어둡게 하기, 앱을 철저히 테스트한 다음 필요에 따라 뷰를 제외합니다.

앱에서 Theme.Material과 같은 어두운 테마를 사용하는 경우 강제로 어둡게 기능이 작동하지 않습니다. 적용됩니다. 마찬가지로 앱의 테마가 DayNight 테마에서 상속되면 자동 테마 전환으로 인해 어두운 테마가 적용되지 않습니다.

뷰에서 어두운 테마 강제 설정 사용 안함

어두운 테마 강제 설정은 android:forceDarkAllowed 레이아웃 속성 또는 setForceDarkAllowed()

웹 콘텐츠

웹 기반 콘텐츠에 어두운 테마를 사용하는 방법에 관한 자세한 내용은 WebView의 웹 콘텐츠 어둡게 만들기를 참고하세요. 어두운 테마의 예 WebView 데모를 보려면 GitHub 에서 자세한 내용을 확인하실 수 있습니다.

권장사항

다음 섹션에서는 어두운 테마를 구현하기 위한 권장사항을 설명합니다.

알림 및 위젯

기기에 표시되지만 직접 제어하지 않는 UI 노출 영역의 경우 사용하는 모든 뷰에 호스트 앱의 테마가 반영되도록 합니다. 두 가지 예는 사용할 수 있습니다.

알림

시스템 제공 알림 템플릿(예: MessagingStyle) 사용 이 시스템이 올바른 뷰 스타일을 적용해야 함을 의미합니다.

위젯 및 맞춤 알림 뷰

런처 위젯의 경우 또는 앱이 맞춤 알림 콘텐츠 뷰를 사용하는 경우 밝은 테마와 어두운 테마 모두에서 콘텐츠를 테스트합니다.

일반적으로 다음과 같은 함정에 주의해야 합니다.

배경 색상이 항상 밝다고 가정합니다.
텍스트 색상을 하드코딩합니다.
기본 텍스트 색상을 사용하는 동안 하드코딩된 배경 색상을 설정합니다.
정적 색상인 드로어블 아이콘 사용

이러한 모든 경우에 하드코딩이 아닌 적절한 테마 속성을 사용하세요. 있습니다.

실행 화면

앱에 맞춤 시작 화면이 있는 경우 시작 화면이 표시되도록 수정해야 할 수도 있습니다. 선택한 테마가 반영됩니다.

프로그래매틱 방식으로 설정된 배경 색상과 같은 하드코딩된 색상을 모두 삭제합니다. 흰색입니다. 대신 ?android:attr/colorBackground 테마 속성을 사용하세요.

구성 변경

시스템 설정이나 AppCompat을 통해 앱의 테마가 변경되면 uiMode 트리거 구성을 변경할 수 있습니다 즉, 활동이 자동으로 다시 생성됩니다.

앱이 구성 변경을 처리하도록 해야 하는 경우도 있습니다. 예를 들어 동영상을 재생하는 중이라 구성 변경을 지연하려 할 수 있습니다.

앱은 각 테마가 설정될 때마다 각 테마가 적용된다고 선언하여 Activity는 uiMode 구성 변경을 처리할 수 있습니다.

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

Activity가 구성 변경을 처리한다고 선언하면 onConfigurationChanged() 테마 변경이 있을 때 메서드가 호출됩니다.

현재 테마를 확인하려면 앱에서 다음과 같은 코드를 실행할 수 있습니다.

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

자바

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}