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

DynamicColorIOS

DynamicColorIOS関数は、iOSに固有のプラットフォーム色の型です。

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、オプションキーであるhighContrastLightとhighContrastDarkを持つオブジェクトを単一の引数として受け取ります。これらはそれぞれiOSの「ライトモード」と「ダークモード」に使用したい色に対応し、ハイコントラストアクセシビリティモードが有効になっている場合は、それらのハイコントラストバージョンに対応します。

ランタイム時に、システムは現在のシステムの外観とアクセシビリティの設定に応じて表示する色を選択します。ダイナミックカラーは、システム設定の変更に自動的に対応しながら、ブランディングカラーやその他のアプリ固有の色に役立ちます。

開発者向けノート​

CSSで@media (prefers-color-scheme: dark)に慣れている場合は、これと似ています。メディアクエリですべての色を定義するのではなく、その場で使用している状況に応じてどの色を使用するかを定義します。

例​

import {DynamicColorIOS} from 'react-native';

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

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