Skip to main content
Version: Next

외관 설정

tsx
import {Appearance} from 'react-native';

Appearance 모듈은 사용자의 외관 설정 정보를 제공한다. 예를 들어, 사용자가 선호하는 색상 테마(라이트 모드 또는 다크 모드)와 같은 정보를 확인할 수 있다.

개발자 노트​

Appearance API는 W3C의 Media Queries 초안에서 영감을 받았다. 색상 스키마 선호도는 prefers-color-scheme CSS 미디어 기능을 기반으로 설계되었다.

예제​

Appearance 모듈을 사용해 사용자가 선호하는 다크 색상 테마를 확인할 수 있다:

tsx
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // 다크 색상 테마 사용
}

색상 테마는 즉시 확인할 수 있지만, 이 값은 변할 수 있다(예: 일출 또는 일몰 시 예정된 색상 테마 변경). 사용자가 선호하는 색상 테마에 의존하는 렌더링 로직이나 스타일은 값을 캐싱하기보다 매번 렌더링 시 이 함수를 호출해야 한다. 예를 들어, useColorScheme React 훅을 사용해 색상 테마 업데이트를 제공하고 구독할 수 있다. 또는 StyleSheet에 값을 설정하는 대신 인라인 스타일을 사용할 수도 있다.

참조

메서드​

getColorScheme()​

tsx
static getColorScheme(): 'light' | 'dark' | null;

현재 사용자가 선호하는 색상 스킴을 나타낸다. 이 값은 나중에 사용자의 직접적인 동작(예: 기기 설정에서 테마 선택 또는 setColorScheme를 통한 애플리케이션 수준의 사용자 인터페이스 스타일 선택)이나 일정에 따라(예: 주야간 주기에 따라 변경되는 라이트 및 다크 테마) 업데이트될 수 있다.

지원되는 색상 스킴:

  • light: 사용자가 라이트 색상 테마를 선호한다.
  • dark: 사용자가 다크 색상 테마를 선호한다.
  • null: 사용자가 선호하는 색상 테마를 지정하지 않았다.

참고: useColorScheme 훅도 확인해 보자.

참고: Chrome으로 디버깅할 때 getColorScheme()은 항상 light를 반환한다.

setColorScheme()​

tsx
static setColorScheme('light' | 'dark' | null): void;

애플리케이션이 항상 밝거나 어두운 인터페이스 스타일을 사용하도록 강제한다. 기본값은 null이며, 이 경우 애플리케이션은 시스템의 인터페이스 스타일을 상속받는다. 다른 값을 지정하면 새로운 스타일이 애플리케이션과 애플리케이션 내의 모든 네이티브 엘리먼트(알림, 피커 등)에 적용된다.

지원되는 색상 스키마:

  • light: 밝은 사용자 인터페이스 스타일 적용
  • dark: 어두운 사용자 인터페이스 스타일 적용
  • null: 시스템의 인터페이스 스타일을 따름

참고: 이 변경은 시스템에서 선택된 인터페이스 스타일이나 다른 애플리케이션에서 설정된 스타일에는 영향을 미치지 않는다.

addChangeListener()​

tsx
static addChangeListener(
  listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;

외관 설정이 변경될 때 실행되는 이벤트 핸들러를 추가한다.