5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SwiftUI でアプリ全体の TintColor を変更する

Last updated at Posted at 2020-07-14

SceneDelegate で色を指定する

SwiftUI プロジェクトを新規作成すると、 SceneDelegate 内に UIWindow を生成するコードがデフォルトで用意されるはずです。
生成された window の tintColor プロパティに任意の色を指定すると、アプリ全体の TintColor を変更することができます。

SceneDelegate.swift
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    let contentView = ContentView()

    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)

        // この 1 行を追加する
        window.tintColor = .systemGreen

        self.window = window
        window.makeKeyAndVisible()
    }
}

今回の例では systemGreen を指定していますが、 型は UIColor なのでアプリのイメージカラーに応じて自由に設定できます。
例のように systemColor にしておくと、ダークモード時にシステム側が上手く色を調整してくれるので大変便利です。
カスタムカラーを用いるかどうかはデザイナーさんと相談して決めてください。

window.tintColor = UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)

ちなみに残念ながら window.tintColor で指定した値は Preview には反映されません。

余談

SwiftUI で色を変更する手段として、 foregroundColor() , accentColor() , background() などを設定する方法があります。
これらを ContentView のようなルートとなる View に設定して色を変えるという方法も考えられます。

struct ContentView: View {
    var body: some View {
        TabView {
            ...
        }.accentColor(.green)
    }
}

この場合は Preview にも反映されるため、その恩恵を受けることができます。しかし、

色の指定が反映されない View もあるので注意が必要です。

例えば Button 内の Text がデフォルトカラーのまま表示されることを確認しています。
この挙動はおそらく不具合ではなく SwiftUI の仕様です。

全体の色を一括で変更したい場合は tintColor を指定し、accentColor() などは各 View に対して細かな指定をしたい場合のみ設定する方が良いと思います。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?