Skip to main content

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',
});