ColorSetの使い方
2021年03月09日
![](/images/category//swiftui.png)
ColorSetに色を追加する
色を追加する
Assets.xcassets を選択し、下にある「+」ボタンから「New Color Set」を選択
![Color Setを追加する](/article-images/how-to-color-set/01.png)
Color Setに対し分かりやすい名前を付け、色を設定
「Show Color Panel」からhex値も設定出来ます
![Color SetをHEX値で設定する](/article-images/how-to-color-set/02.png)
色を使う
Color Setに設定した名前を Color()
の引数に文字列として設定する事でその色を呼び出す事が出来ます。
struct ContentView: View {
var body: some View {
Text("Hello, World!")
.foregroundColor(Color("main"))
}
}
![Colorで色を指定する](/article-images/how-to-color-set/03.png)
Dark modeに対応する
Color Set の「Appearance」から Any, Dark
を選択し、Dark mode時の色を設定
![Dark mode時の色を設定する](/article-images/how-to-color-set/04.png)
あとは同じように色をコードで指定すれば端末のモードに応じて色が変わります
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Color Set!!")
.foregroundColor(Color("main"))
.font(.title)
Text("sub title")
.foregroundColor(Color("sub"))
}
}
}
}
![Dark modeを設定する事で色が変わって見える](/article-images/how-to-color-set/05.png)
Extensionを定義する
ColorのExtensionを定義すると呼び出しやすく出来ます
Color.swift
import SwiftUI
extension Color {
static let main = Color("main")
static let sub = Color("sub")
}
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Color Set!!")
.foregroundColor(Color.main)
.font(.title)
Text("sub title")
.foregroundColor(Color.sub)
}
}
}
}