[iOS13 Beta]DarkModeとは?対応をどうすればいいのか

DarkModeとは

iOS13から実装された機能で、UIが暗い配色になります。

メリットとしては

  • 明るい画面と暗い画面の明暗差を少なくし、目の負担を軽減
  • ディスプレイの輝度が下がることによってバッテリーの消費が抑えられる
  • 有機ELの焼き付きを防ぐ為

バッテリーが節約できて、おまけにユーザーの目も疲れない、有機ELの焼き付きも少なくなる!ということで非常にお得な機能になっています

DarkModeにする方法

設定アプリを起動し、「画面表示と明るさ」を選択します。

そして、一番上に出てくる「Light」と「Dark」の切り替えで設定を行います。

実際どんな感じになるのか?

システムのカレンダー画面

LightModeUI
現在のUI
DarkModeUI
DarkMode UI

現在のUIModeでは明るく、DarkModeでは暗くなっています

色はどう変わる?

DefaultColorで設定されていれば、自動的にLIghtModeでは黒、DarkModeでは白になってくれますが、RGB値を指定してある色はそのままの色で表示されます。

実際に試してみます

LightMode
DarkColoirサンプル
DarkMode

Defaultはうまく色が変わってくれていますが、White ColorはLightModeで表示されませんし、Black ColorはDarkModeで表示されません。

黒カスタムもDarkModeでは見えなくなってしまっています。

対応方法

外観のモードを固定する

info.plist にUser Interface Styleを追加し LIght or Darkを設定します

User Interface Style

これで固定されます

画像を Dark Mode と Light Mode で切り替える

Assets.xcassetsを開きます。

Appearancesの項目をnoneからAny, Darkに変更します

Any AppearanceがLight Mode, Dark AppearanceがDark Modeの画像を設定することができます

画像Any Appearance

Assets.xcassetsを開きます。

項目追加で New Color Setを選択します

Appearancesの項目をnoneからAny, Darkに変更します

Any AppearanceがLight Mode, Dark AppearanceがDark Modeの色を設定することができます

あとは作成した色をセットしてあげればOKです

Any Appearance設定

ただしこの方法が使えるのはiOS11以降からなので気をつけてください。

DarkModeを確認する

資料

  • https://developer.apple.com/videos/play/wwdc2019/214/
  • https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/
  • https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
  • https://developer.apple.com/documentation/appkit/nsappearancecustomization/choosing_a_specific_appearance_for_your_macos_app
タイトルとURLをコピーしました