浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】iOS端末の外観モードがライトモードかダークモードかを取得する

今回は、iPhone の端末がライトモードなのかダークモードなのかを取得する方法についてです。
ダイアログのテキストを変更した際、うっかり文字色を黒にしてしまい、ダークモードで実行したらダイアログの文字が見えない…というポカをやらかしたので、その対策方法についてです。

 

端末の外観モードの取得は、React Native の Appearance を使います。
公式サイトのページはこちらです。

Appearance · React Native
https://reactnative.dev/docs/appearance

サンプルコードは下記のとおりです。

import { Appearance } from 'react-native';

const colorScheme = Appearance.getColorScheme();

上記コードを実行すると、変数 colorSchemelight もしくは dark という文字列が代入されます。
そのため、light だったらライトモード用の設定を、dark だったらダークモード用の設定を反映するようコードに記述してください。
私の場合は、ダイアログのテキスト色を設定したかったので、dark だったら文字色は白色に、それ以外の時は文字色を黒色にするよう設定しました。

 

以上、React Native で iOS 端末の外観モードがライトモードかダークモードかを取得する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)