見出し画像

SwiftUIでDynamic Colorを定義する

TAAT

SwiftUIでレイアウトを組む時に、systemBlueのようにシステムカラーを使うと、ライトモードやダークモードでもいい感じに表示してくれるが、 今回はカスタムのDynamic Colorを定義して利用する方法を紹介する。

ColorSchemeを使う

SwiftUIではcolorSchemeという環境変数からカラースキームを取得でき、Viewに適用されている外観（light/dark）がわかる。

struct ContentView: View {
    // カラースキームの環境変数を取得
    @Environment(\\.colorScheme) private var colorScheme
    
    var body: some View {
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(color)
    }
    
    private var color: Color {
        let lightColor = Color(red: 255/255, green: 160/255, blue: 122/255)
        let darkColor = Color(red: 200/255, green: 20/255, blue: 60/255)
        
        // ライトモード・ダークモードに応じてカラーを返却する
        switch colorScheme {
        case .light:
            return lightColor
        case .dark:
            return darkColor
        @unknown default:
            return lightColor
        }
    }
}

この方法は簡単にDynamic Colorを使えるが、カラーの種類が増えたり、参照するViewが増えると煩雑になってしまう。そこで、この記事にあるようにカスタムViewModifierを定義する方法もある。

Asset Catalogを使う

colorSchemeを使う以外にも、Asset CatelogでDynamic Colorを定義する方法がある。

  1. Assets.xcassetsで「+」ボタンから新しいColor Setを追加する。

  2. Color Setに任意の名前を付ける。

  3. Color SetのAppearanceでAny, Darkを選択する。

  4. それぞれのAppearanceを選択して、インスペクタでカラーを設定する。

    • Floating Point (0.0-1.0)：浮動小数点で指定

    • 8-bit (0-255)：整数値で指定

    • 8-bit (Hexadicimal)：Hex値で指定

  5. Color("<カラーセット名>")で定義したDynamic Colorを参照できる。

参考

この記事が気に入ったらサポートをしてみませんか？