【Xcode】アセットカタログに独自のカラーセットを定義する方法

この投稿は何？

Xcodeのセットカタログで、独自のカラーセットを定義する。

実行環境

• Xcode 15.4
• Swift 5.10
• macOS Sonoma 14.5

Swiftを基礎から学ぶには
自著、工学社より発売中の「まるごと分かるSwiftプログラミング」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。
また、Swiftプログラミングを基礎から動画で学びたい方には、Udemyコース「今日からはじめるプログラミング」をお勧めします。

手順

1. ナビゲーターエリアの Assets.xcassets を選択する。
   アセットカタログでは、左側にアセットの一覧が表示される。
   どれかを選択すると、その詳細が右側のペインに表示される。

2. 新しいカラーセットを作成するために、アセットリストの下部にある[+]ボタンをクリックして、Color Set を選択する。
   ここでは、カラーセットの名前を「GradientTop」にする。

3. ライトモードとダークモードで同じ色を使用するために、インスペクタエリアで Appearances で「None」を選択する。
   すると、色見本は Univarsal だけになる。

4. 色見本の Univarsal を選択する。
   インスペクタで、コントロールを使用して色を定義する。
   例）Red: 0.852、Green: 0.646、Blue: 0.847

5. もうひとつ、「GradientBottom」という名前のカラーセットを作成する。
   例）Red: 0.954、Green: 0.529、Blue: 0.385

6. ビューの背景に独自のカラーセットを適用する。

全体のコード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            Text("Awesome SwiftUI")
        }
        .font(.largeTitle)
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Gradient(colors: [.gradientTop, .gradientBottom]))
        // Xcodeは自動的に、独自に定義したカラーセットごとにカラー値（ロワーキャメルケース）を提供する。
    }
}