toolbarColorSchemeの使い方

toolbarColorSchemeは、ツールバーのカラースキームを設定するためのモディファイアです。
これを使うことで、ナビゲーションバーやツールバーの外観をダークモードやライトモードに設定できます。

iOS：16.0以上
XCode（当サイトの環境）：15.0.1

以下に、具体的な使用方法とサンプルコードを示します。

基本シンタックス
1. パラメータ
サンプルコード

基本シンタックス

.toolbarColorScheme(_ colorScheme: ColorScheme?, for bars: ToolbarPlacement...)

パラメータ

colorScheme

設定するカラースキーム。ColorScheme.light または ColorScheme.dark

ColorScheme.light: ツールバーのカラースキームをライトモードに設定します。
ColorScheme.dark: ツールバーのカラースキームをダークモードに設定します。
nil: デフォルトのカラースキームを使用します。

bars

カラースキームを適用するツールバーの種類。navigationBar,tabBar

navigationBar: ナビゲーションバーにカラースキームを適用します。
tabBar: タブバーにカラースキームを適用します。
複数指定も可能です。
swift .toolbarColorScheme(.dark, for: .navigationBar, .tabBar)

サンプルコード

次に、toolbarColorSchemeを使った具体的なサンプルコードを示します。

以下のようにホームタブと設定タブが配置されているビューで試してみましょう。ホームタブのビューにはツールバー上部に確定ボタンを配置しています。

import SwiftUI

struct toolbarColorScheme: View {
    var body: some View {
        TabView {
            HomeTab()
                .tabItem {
                    Label("HOME", systemImage: "house")
                }
            
            SettingTab()
                .tabItem {
                    Label("SETTING", systemImage: "gearshape")
                }
                    
        }
    }
    
    struct HomeTab: View {
        var body: some View {
            NavigationStack {
                List {
                    ForEach(1..<50) { item in
                        Text("ITEM \(item)")
                    }
                }
                .navigationTitle("HOME")
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button(action: {
                            print("Confirm")
                        }) {
                            Text("確定")
                        }
                    }
                }
            }
        }
    }
    struct SettingTab: View {
        var body: some View {
            NavigationStack {
                List {
                    ForEach(1..<50) { item in
                        Text("ITEM \(item)")
                    }
                }
                .navigationTitle("SETTING")
            }
        }
    }
}

#Preview {
    toolbarColorScheme()
}

ダークモードに設定

ベースとなるコードができたので、ホームビューにダークモードの配色を適用してみます。

   struct HomeTab: View {
        var body: some View {
            NavigationStack {
                List {
                    ForEach(1..<50) { item in
                        Text("ITEM \(item)")
                    }
                }
                .navigationTitle("HOME")
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button(action: {
                            print("Confirm")
                        }) {
                            Text("確定")
                        }
                    }
                }
                //ダークモードの配色を設定
                .toolbarColorScheme(.dark, for: .navigationBar, .tabBar)
                //常時背景色を適用
                .toolbarBackground(.visible, for: .navigationBar, .bottomBar)
            }
        }
    }