2022/7/4

【Swift UI】ダークモード時にテキストの文字色を変更する方法！

この記事からわかること

SwiftUI：ダークモード対応で文字色を切り替える方法
ColorSchemeとは？
@Environmentの使い方
Assetsにオリジナルカラーを定義する方法
アプリ全体を常時ダークモード状態にするには？

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIでアプリ開発をする際に注意したいのがダークモードの対応です。文字色を黒色にしているとダークモードの時に同化して見えなくなってしまうことがあります。今回はその解決方法とColorSchemeの使い方をまとめていきます。

ダークモード時に文字色を変更させる方法

設定されているモードにより変更させる解決方法

@Environment(\.colorScheme) var colorScheme: ColorScheme

var body: some View {
    TextField("km", text: $milage)
      .foregroundColor(colorScheme == .dark ? Color.white : Color.black)
}

TextFieldなどを使用している場合、iPhoneの設定がダークモードになっていると以下のように背景も自動で黒色になります。文字色を明示的に黒色などにしていた場合は同化して見えなくなってしまうのでダークモード時と通常時で文字色を切り替える必要があります。

解決するポイント

ColorScheme
@Environment

ColorSchemeとは？

ColorSchemeとは設定されているモードが通常(ライトモード)かダークモードかが定義されている列挙型です。ここでは値を定義しているだけで後述している@Environmentと組み合わせることで環境に応じた値を取得できるようになります。

定義

public enum ColorScheme : CaseIterable {
    case light // 通常モード

    case dark // ダークモード
}

使用方法は公式ドキュメントに記載されていました。

Apple：ColorScheme

使用方法

@Environment(\.colorScheme) var colorScheme: ColorScheme

var body: some View {
    Text(colorScheme == .dark ? "Dark" : "Light")
}

上記のコードにより変数colorSchemeの中に現在設定されているモード値が格納されます。あとはその値によって分岐できるように式 ? 真の時 : 偽の時を使って記述するだけです。

@Environmentとは？

Apple：EnvironmentValueの種類

@Environmentは環境変数を取得できるProperty Wrapper(プロパティラッパ)です。環境(ユーザの設定)によって値が変わる値が初期値として格納されています。引数に渡すEnvironmentValueのよって様々な値を読み取ることができるようになります。ColorSchemeもその1つです。

@Environment(\.locale) var locale: Locale

@Environmentを使えばより柔軟でユーザビリティの高いUIが作成できるようになりそうです。

Assetsに色を定義してダークモードに対応する

ダークモードに対応させるもう1つの方法としてオリジナルカラーを定義していきます。

XcodeではAssetsにオリジナルのカラーを定義して使用することができ、ライトモード時のカラーとダークモード時のカラーを設定できるのでオリジナルカラーを使うだけで簡単に対応させることも可能です。

まずはナビゲータエリアの中から「Assets」または「Assets.xcassets」をクリックします。続いて左下にある「」から「Color Set」をクリックして任意の名前(今回はThemaColor)をつけたオリジナルカラーセットを用意します。

左側の「Any appearance」がライトモード時のカラー、右側の「Dark」がダークモード時のカラーになります。

あとは両者を選択して右下のカラーパラメータで好きな色に調整すれば準備完了です。

使用する際はColor("定義したセット名")を記述するだけです。

.foregroundColor(Color("ThemaColor"))

文字カラーを常にダークモード時状態で適応させる

文字カラーを常にダークモード時状態として適応させるにはenvironmentを使用します。

VStack{
    Text("Hello World!!")
}.environment(\.colorScheme, .dark)

これでText("Hello World!!")はダークモード時のビューとして表示されるようになります。

アプリ全体を常時ダークモード状態にする

.environment(\.colorScheme, .dark)を使用すればアプリ全体を常時ダークモード状態にすることも可能です。しかし大枠をVStackなどで囲っても文字色のみしかダークモード状態になりませんでした。

アプリ全体を常時ダークモード状態にするには以下のように全体をTabViewで囲うことでアプリ全体がユーザーの設定を無視してダークモードが適応されるようになりました。

struct ContentView: View {
    
    @State  var text:String = ""
    @State  var selectedTag = 1
    
    var body: some View {
        TabView(selection: $selectedTag){
            Text("Hello").tabItem{
                Image(systemName: "fuelpump.circle")
                Text("Nenpi")
                
            }.tag(1)
            TextField("km",text: $text).tabItem{
                Image(systemName: "car.circle")
                Text("Price")
            }.tag(2)
        }.environment(\.colorScheme, .dark)
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書

リンク

Swift