다크 모드 테마

이 문서는 기존 편집기에 적용됩니다. 다크 모드는 사용자에게 시스템 전체 색상 환경설정을 지정할 수 있는 기회를 제공합니다(Android 10 및 iOS 13에서 도입). “다크” 테마는 배터리 수명을 절약하고 사용자의 눈의 피로를 줄이는 동시에 앱 개발자에게 다크 색상 테마를 구현할 수 있는 방법을 제공하기 위한 것입니다.

Braze 인앱 메시지는 사용자의 환경설정에 따라 적절한 색상 메시지를 전달하고 앱 디자인과의 일관성을 유지할 수 있도록 대체 다크 테마 추가를 지원합니다.

다크 모드 작동 방식

Android 10 이상 또는 iOS 13 이상 버전을 사용하는 사용자는 기기 설정에서 다크 모드를 켜거나 끌 수 있습니다.

다크 모드가 활성화되면 기기의 기본 메뉴와 화면(푸시 알림, 기기 설정 등)이 어두운 회색으로 변경됩니다. 앱 코드에서 대체 테마를 지정하여 다크 모드를 지원하도록 선택할 수도 있습니다.

다크 모드 테마 설정

인앱 메시지를 생성할 때 디자인 탭에 있는 다크 모드를 사용하면 기기에서 다크 모드를 사용 중인 사용자를 위한 대체 색상 테마를 추가할 수 있습니다.

이 옵션이 활성화되면 색상 선택기를 사용하거나 기존 색상 프로필을 선택하여 기존 다크 또는 라이트 테마를 재사용함으로써 인앱 메시지의 다크 테마 색상을 선택할 수 있습니다.

다크 모드를 일관되게 사용하기

모든 인앱 메시지에 다크 모드를 사용하려면 템플릿 > 인앱 메시지 템플릿으로 이동합니다.

거기에서 드롭다운에서 색상 프로필 생성을 선택합니다. 다크 모드 테마에 맞는 색상 프로필을 생성합니다. 그런 다음 인앱 메시지의 다크 모드 버전을 생성할 때마다 해당 색상 프로필을 선택하여 인앱 메시지의 외관을 일관되게 유지할 수 있습니다.

호환성

• 사용자의 iOS 기기 버전이 13 이상이거나 Android 기기 버전이 10 이상이어야 합니다.
• Braze iOS SDK v3.21.0 이상, Braze Android SDK v3.8.0 이상이 필요합니다.

HTML 인앱 메시지 사용

HTML 인앱 메시지에 다크 및 라이트 테마를 생성하려면 prefers-color-scheme CSS 미디어 기능을 사용하여 사용자의 환경설정을 감지할 수 있습니다.

예시:

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: #555;
  }
}