メインコンテンツへスキップ

DynamicColorIOS

DynamicColorIOS関数は、iOS固有のプラットフォームカラータイプです。

tsx
DynamicColorIOS({
  light: color,
  dark: color,
  highContrastLight: color, // (optional) will fallback to "light" if not provided
  highContrastDark: color, // (optional) will fallback to "dark" if not provided
});

DynamicColorIOSは、2つの必須キーdarkとlight、および2つのオプションキー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',
});