今回は、iPhone の端末がライトモードなのかダークモードなのかを取得する方法についてです。
ダイアログのテキストを変更した際、うっかり文字色を黒にしてしまい、ダークモードで実行したらダイアログの文字が見えない…というポカをやらかしたので、その対策方法についてです。
端末の外観モードの取得は、React Native の Appearance を使います。
公式サイトのページはこちらです。
Appearance · React Native
https://reactnative.dev/docs/appearance
サンプルコードは下記のとおりです。
import { Appearance } from 'react-native';
const colorScheme = Appearance.getColorScheme();
上記コードを実行すると、変数 colorScheme に light もしくは dark という文字列が代入されます。
そのため、light だったらライトモード用の設定を、dark だったらダークモード用の設定を反映するようコードに記述してください。
私の場合は、ダイアログのテキスト色を設定したかったので、dark だったら文字色は白色に、それ以外の時は文字色を黒色にするよう設定しました。
以上、React Native で iOS 端末の外観モードがライトモードかダークモードかを取得する方法についてでした。
ご参考になれば幸いです。
