SwiftUIでDynamic Colorを定義する
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を定義する方法がある。
Assets.xcassetsで「+」ボタンから新しいColor Setを追加する。
Color Setに任意の名前を付ける。
Color SetのAppearanceでAny, Darkを選択する。
それぞれのAppearanceを選択して、インスペクタでカラーを設定する。
Floating Point (0.0-1.0):浮動小数点で指定
8-bit (0-255):整数値で指定
8-bit (Hexadicimal):Hex値で指定
Color("<カラーセット名>")で定義したDynamic Colorを参照できる。
参考
この記事が気に入ったらサポートをしてみませんか?