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

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 は、dark と light の2つの必須キー、および highContrastLight と highContrastDark の2つのオプションキーを持つ単一のオブジェクト引数を取ります。これらは、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',
});