[SwiftUI]Text(テキスト)の色をダークモードで切り替えるには？

SwiftUI

2022.05.12

どうも、ちょげ(@chogetarou)です。

Text(テキスト)の色をダークモードで切り替える方法を紹介します。

方法
1. colorScheme
2. Assets
まとめ

方法

Textの色をダークモードで切り替える方法は、２つあります。

colorScheme

１つは、colorSchemeを使う方法です。

まず、colorSchemeの環境変数を取得します。

@Environment(\.colorScheme) var colorScheme: ColorScheme

そして、colorSchemeの値が「.dark」かどうかで色を切り替えます。

Text("テキスト")
    .foregroundColor(colorScheme == .dark ? darkModeColor : whiteModeColor)

colorSchemeの値が「dark」であればダークモード、「dark」でなければライトモードです。

使用例

struct ContentView: View {
    
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .foregroundColor(colorScheme == .dark ? Color.white : Color.black)
        }
    }
}

Assets

もう１つは、Assetsを使う方法です。

まず、Assetsを開きます。

次に、左下の「＋」をクリックし、「Color Set」をクリックします。

生成した「Color Set」を開き、「Any Appearance」にライトモードの色、「Dark」にダークモードの色を指定します。

あとは、生成した「Color Set」を、テキストの色に指定します。

Text("テキスト")
    .foregroundColor(Color("TextColor")) //Color内の文字列は「Color Set」の名前

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .foregroundColor(Color("TextColor"))
        }
    }
}