[SwiftUI]Colorの整理とダークモード対応（超簡単）

3767 ワード
iOS Swift SwiftUI ダークモード iOS テキストリンク

投稿の経緯

SwiftUI × 個人開発でアプリ内で使う配色を管理する場合に使った方法を投稿します。

環境

Swift version 5.4.2
Xcode version 12.5.1

Colors.xcassetsの作成

File > New > File...でAsset Catalogを選択して今回はColorsという名前でファイルを新規作成します。

ファイルを作成したら下記画像のようにNew Color Setで色を追加します。

左側がライトモード対応で右側がダークモード対応です。
ここで設定した色が端末のライト or ダークで自動で切り替えられます。超便利ですね。

次はColorsファイルで作成した色をコードで使えるように設定します。

ColorManagerの作成

Colorsで作成した色をコードで扱うために、ファイルを新規作成し、構造体ColorManagerを定義します。
ColorManagerでは以下のように定義します。

struct ColorManager {
    static let 定数名 = Color("Colorsで設定したColor名")
}

私の場合は以下のように設定しています。参考に。。

struct ColorManager {
    static let baseColor = Color("base_color")
    static let mainColor = Color("main_color")
}

後は、コードで呼び出すだけです。

反映方法

反映方法は以下の通り。

ColorManager.baseColor

.foregroundColor(ColorManager.baseColor)

.background(ColorManager.baseColor)

UIColorに設定する場合は以下の通り。

UIColor(ColorManager.baseColor)

ポイントはColorとして扱われる点です。参考にしてください。

お知らせ

現在、iOS開発案件を業務委託で募集中です（副業）。TwitterDMでご依頼をお待ちしています