対象者
- SwiftUIの経験がある人.
- 趣味で触ってる人.
やること/やらないこと
ライトモードとダークモードで、Text Colorが変更されるロジックを三項演算子でやってみました。筆者は普段は、DartとTypeScriptを書いてる人なので、SwiftUIはど素人です😅
なので、深掘りはしません。
公式ドキュメントはあるみたい?
SwiftUIが現在ColorScheme.lightまたはColorScheme.darkを使用してビューを表示しているかどうかを調べるために、ビュー内からこの環境値を読み取ります。受け取る値はユーザーがダークモードを有効にしているかどうかに依存し、おそらく現在のプレゼンテーションのビュー階層の設定によって優先されます。
@Environment(\.colorScheme) private var colorScheme
var body: some View {
Text(colorScheme == .dark ? "Dark" : "Light")
}
プロジェクトの説明
Hello Worldするプロジェクトのコードを以下のように書き換えて、ダークモードとライトモードの切り替えをx-code上で動作検証しております。
色の変更の分岐処理は、三項演算子の? : でやっております。
ContentView.swift
import SwiftUI
struct ContentView: View {
@Environment(\.colorScheme) var colorScheme
var body: some View {
Text(colorScheme == .dark ? "In dark mode" : "In light mode").foregroundColor(
colorScheme == .dark ? .white : .black)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
ライトモード:
switchを押すと切り替えることができます。
ダークモード:
ダークモードだとこんな感じです。
感想
昔、StoryBoardを学習していたときもライトモードとダークモードの対応が必要だったのですが、全然やってませんでした笑
Flutterだと特に意識しなくてもやってくれるような?
デフォルトだと白だったような...
Discussion