LoginSignup
1
1

More than 1 year has passed since last update.

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

Posted at

投稿の経緯

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

環境

Swift version 5.4.2
Xcode version 12.5.1

Colors.xcassetsの作成

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

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

スクリーンショット 2021-09-01 16.47.22.png

左側がライトモード対応で右側がダークモード対応です。
ここで設定した色が端末のライト 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でご依頼をお待ちしています

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1