【超簡単】SwiftUIでアプリをダークモード対応にする

今回はSwiftUIでビューを簡単にダークモード対応する方法を学んだのでメモ。

サンプルファイル

import SwiftUI

struct ContentView: View {
    
    var currentUserID: String? = nil
    var body: some View {
        TabView{
            NavigationView{
                FeedView(posts: PostArrayObject(), title: "Feed")
            }
            .tabItem {
                Image(systemName: "book.fill")
                Text("Feed")
            }
            
						//省略
            .tabItem{
                Image(systemName: "person.fill")
                Text("Profile")
            }
        }
				//ナビゲーションバーが紫になってしまって見えない
        .accentColor(Color.MyTheme.purpleColor)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.light)
    }
}

この状態だとナビゲーションバーが紫になってしまって見えません。

そこで、ダークモードの場合はナビゲーションバーの色を黄色に変更します。

プレビュー画面をダークに変更する

まず全体のプレビュー画面をダークモードに変更します。

ビュー全体のモードを切り替えるには、preferredColorScheme を使用します。

.darkにするとダークモード、.lightにするとライトモードです。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.light)
    }
}

環境変数を設定する

ここで、colorSchemeとい環境変数を用意します。

環境変数とは、view全体の環境を処理する初期値みたいなもの。

これを設定することで、テキスト間の幅だったりアニメーションの設定だったり、いろいろな値をとることができます。

今回取り扱うcolorSchemeは、view全体をライトモードかダークモードかを判定する変数です。

.darkか.lightを返します。

import SwiftUI

struct ContentView: View {
    //環境変数
    @Environment(\\.colorScheme) var colorScheme
    var currentUserID: String? = nil
    var body: some View {
        TabView{
				//省略

アクセントカラーを環境変数によって変更する

先程の環境変数をとることによって、ユーザーが現在ライトモードかダークモードかによって文字のアクセントカラーを変更させます。

三項演算子を使用して書いていきます。

						//省略
            .tabItem{
                Image(systemName: "person.fill")
                Text("Profile")
            }
        }
				//アクセントカラーを変更
        .accentColor(colorScheme == .light ? Color.MyTheme.purpleColor : Color.MyTheme.yellowColor)
    }
}

こうしてナビゲーションバーのボタンの色が黄色になりました！

変更後

import SwiftUI

struct ContentView: View {
    //環境変数
    @Environment(\\.colorScheme) var colorScheme
    var currentUserID: String? = nil
    var body: some View {
        TabView{
            NavigationView{
                FeedView(posts: PostArrayObject(), title: "Feed")
            }
            .tabItem {
                Image(systemName: "book.fill")
                Text("Feed")
            }
            
						//省略
        
            .tabItem{
                Image(systemName: "person.fill")
                Text("Profile")
            }
        }
        .accentColor(colorScheme == .light ? Color.MyTheme.purpleColor : Color.MyTheme.yellowColor)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
						//ダークモード
            .preferredColorScheme(.dark)
    }
}