[SwiftUI] ColorSet を使った Dark-mode 対応

環境＆対象

ダークモード

ユーザーの設定によっては、夜間はダークモードになり、色調が変更されます。（一般に暗くなります）

SwiftUI で用意されているビューを使用していると、それらのビューは、自動的にダークモードに合わせた色に切り替わります。

自作ビュー

自作のビューで、独自に色指定していると、ダークモード時に、他のビューの挙動が合わせられず、ちぐはぐな色使いになることがあります。

自作ビューの例

通常モードでは、以下のような表示になっています。

NormalMode

ふとダークモードにして立ち上げてみると以下のような表示になりました。

WrongDardMode

上半分は自作ビューで、背景を Color.White としていたので、ダークモードになった際に、まわりとの整合性がなくなってしまいました。

ダークモード判定

SwiftUI での実行時に、その時点でのモードを判定することができます。

@Environment(\.colorScheme) var colorScheme

Apple のドキュメントは、こちら。

値としては、dark と light を取り得ます。

この変数を使用して、その時点でのモードがダークモードか判定することができます。

ダークモード判定を使用して制御する

この変数を使用して、使用する色を変更することができます。

先ほどの例では、単純に以下のようにしてしまっていたために、いつでも白が使用されていました。

Color.white

以下のように変数を使用して判定する色を変更することで、ダークモードに対応することも可能です。

if colorScheme == .light {
  Color.white
} else {
  Color.black
}

ですが、この方法はあまり推奨されない方法です。

これは、tint color として、アプリ内で独自色を使用するよりも、.tintColor を使用して設定することが推奨されることと同じ理由です。システムとしての整合性を担保できないので、アプリが個別に色管理することは推奨されていません。

UIKit, AppKit でのダークモード対応

UIKit や AppKit には、UIColor と NSColor がそれぞれ 色情報を持つクラスとして定義されていました。

例えば、NSColor には、controlBackgroundColor という色が定義されていて、この色は、ダークモード/ライトモードに合わせて システムが調整してくれています。

ですので、このような色を指定することで、アプリとしてのダークモード対応を行うことができました。

ですが、SwiftUI の Color には、このような定義を持つ動的な色が定義されていません。

UIColor, NSColor を使用してダークモード対応

直接的には用意されていませんが、NSColor, UIColor の持つ 動的な色を SwiftUI の Color に変換して色指定する方法があります。

こうすることで、UIKit, AppKit が持つ 色管理を SwiftUI でも使うことが可能となります。

Color Set を使用して ダークモード対応

アプリケーションとしては、使用する箇所に 色の名前を指定することで、ダークモード / ライトモードに合わせて OS が色を自動で切り替えてくれる方法があります。

具体的には、 Assets の中に Color Set を定義することで、OS に対して、ライトモード/ダークモード でのそれぞれの色を指定することができます。

Asset に Color Set を追加

アセットを選択して、Color Set を追加します。この時に、使用したい色名をアセット名につけます

AddColorSet

Color Set に ダークモード / ライトモードの色を設定

Asset に作成した Color Set を選択すると、”Any Appearance” と “Dark” という色が設定可能になっています。

SetAssetColor

ここでの “Any Appearance” はライトモード時に、”Dark” はダークモード時に 使用される色となります。

ここでは、”boardBackground”という名称を付けていますので、この色名で色指定を行うことで、ダークモード / ライトモード時に、それぞれの色が使用されることになります。

シミュレータでのダークモード確認

起動したシミュレータ上でダークモードを設定することもできるのですが、Xcode から実行しているのであれば、Xcode 上で簡単に ダークモード設定で動作させることができます。

DarkModeSImulator

この機能を使用すると、簡単にダークモード時の動作を確認することができます。

まとめ：Color asset を使った Dark-mode 対応

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

関連記事:

[SwiftUI] SwiftUI の Color を UserDefaults に保存する [Swift][SwiftUI] Transferable で実装する Drag&Drop [Swift] typealias と extension で NSAttributedString を便利に使う [MacOS] アイコンのダークモード対応方法