【SwiftUI】ダークモード対応

アセットカタログを使ったダークモード対応について解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.0
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

カラーセットの定義

プロジェクトナビゲーターで「Assets.xcassets」を選択、右側のEditorでショートカットメニューを開いて、「Color Set」を追加します。

カラーセットの追加

追加されたColor SetのAppearances設定を図のように「Any, Dark」にします。
「Any Appearances」がライトモード時の色、「Dark Appearance」がダークモード時の色指定となります。
ちなみに、Appearances設定で選択できる「Any, Light, Dark」は、iOS12以前のケースを考慮した設定ですので、SwiftUI前提であれば考えなくて良いです。

画面右側の設定画面が表示されない場合は、図の①および②をタップして表示させます。

Appearancesの設定

Color Setを選択した後、右下のColor設定パネルで色を指定します。
Color設定パネル

Show Color Panelをタップすると、次のような多彩な指定方法が選択可能です。
Color panel

スポンサーリンク

コードから使用する

カラーセットで定義したカスタムカラーは、コードから次にように呼び出します。

使用例

カラーセット例(label)
カラーセット例(labelText)

上記の2つのColorSet(labelとlabelText)を使ったサンプルコードです。

実行例

プロパティに定義する

登録したカラーセットを次のように構造体のプロパティとして定義しておくと、入力時に自動補完が効いてタイプミスが防げるので便利です。

スポンサーリンク

Simulatorでライトモード/ダークモードを切り替える方法

Simulator実行時にXcode最下段にある下図のアイコンをタップして「Environment overrides」を表示します。
「Appearance」のトグルボタンをONにすると、ライトモードとダークモードが簡単に切り替えられます。

Appearanceの切り替え

スポンサーリンク

専用のアセットカタログを用意する

新規プロジェクト作成時に、Assets.xcassetsファイルが生成されますが、リソースを整理するためカラーセット専用のアセットカタログを追加するのもありです。

アセットカタログの追加

スポンサーリンク

あわせて読みたい記事

【SwiftUI】色の指定方法(Color)
(2020/8/13 更新)SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信