Skip to main content
Version: Next

DynamicColorIOS

DynamicColorIOS 함수는 iOS 전용 플랫폼 컬러 타입이다.

tsx
DynamicColorIOS({
  light: color,
  dark: color,
  highContrastLight: color, // (선택 사항) 제공되지 않으면 "light"로 대체
  highContrastDark: color, // (선택 사항) 제공되지 않으면 "dark"로 대체
});

DynamicColorIOS는 두 개의 필수 키(dark와 light)와 두 개의 선택적 키(highContrastLight와 highContrastDark)를 가진 객체를 인자로 받는다. 이 키들은 iOS의 "라이트 모드"와 "다크 모드", 그리고 고대비 접근성 모드가 활성화되었을 때 사용할 컬러에 해당한다.

런타임에 시스템은 현재 시스템 모양과 접근성 설정에 따라 어떤 컬러를 표시할지 결정한다. 다이나믹 컬러는 브랜딩 컬러나 시스템 설정 변경에 자동으로 반응해야 하는 앱 전용 컬러에 유용하다.

개발자 노트​

CSS에서 @media (prefers-color-scheme: dark)를 사용해 본 적이 있다면, 이와 비슷하다고 생각하면 된다! 단, 미디어 쿼리에서 모든 색상을 정의하는 대신, 사용하는 위치에서 어떤 상황에 어떤 색상을 사용할지 바로 정의한다. 간편하다!

예제​

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

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});

const customContrastDynamicTextColor = DynamicColorIOS({
  dark: 'darkgray',
  light: 'lightgray',
  highContrastDark: 'black',
  highContrastLight: 'white',
});