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

2 min
アイキャッチ画像

iOS13から導入されたDarkModeとは

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

メリットとしては

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

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

iOS13でDarkModeにする方法

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

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

DarkModeはどんな感じ表示になるのか?

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

DarkModeLight
DarkModeLight
DarkModeDark
DarkModeDark

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

DarkModeでの色はどう変わる?

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

実際に試してみます

LightColor
LightColor
DarkColor
DarkColor

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

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

DarkModeの対応方法

外観のモードを固定する

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

useInterfaceStyle
useInterfaceStyle

これで固定されます

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

Assets.xcassetsを開きます。

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

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

Xcode_asset
Xcode_asset

Assets.xcassetsを開きます。

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

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

xcode_color_asset
xcode_color_asset

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

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

Environment-Override
Environment-Override

ただしこの方法が使えるのは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
カテゴリー:
タグ:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です