PricingLoginStart free
SwiftUI Academy · レッスン

ライトモードとダークモードに対応する

両方の外観にセマンティックカラーを使います。

レッスン 4/413 ステップ

「ライトモードとダークモードに対応する」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。

2つの外観

iOSにはLightとDark Modeがあり、ユーザーはいつでも切り替えられます。完成度の高いアプリは、追加の手間をかけなくてもどちらの外観でもきれいに表示されます。

セマンティックカラーを使う

Color.primaryやColor(.systemBackground)のようなsemantic colorsを使います。外観に応じて自動的に切り替わります。

Text("Title")
    .foregroundStyle(.primary)
    .background(Color(.systemBackground))

色をハードコードしない

固定のColor.blackを背景にすると、Dark Modeでも黒のままになり、背景に溶け込んで見えなくなることがあります。セマンティックカラーは適応しますが、直接指定した色は適応しません。

Text("Hi")
    .background(.black)

Asset Catalogの色

asset catalogで色を定義し、AnyとDarkそれぞれの値を設定します。名前で参照すれば、色が自動的に切り替わります。

Color("Brand")

プライマリとセカンダリ

重要度の低いテキストには.secondaryを使います。各モードで適切に薄くなりながら、読みやすさを保てます。

Text("Subtitle")
    .foregroundStyle(.secondary)

奥行きを生むマテリアル

.ultraThinMaterialのようなシステムmaterialsは背景をぼかし、モードに適応します。そのため、カードにネイティブアプリらしい印象を与えられます。

VStack { }
    .background(.ultraThinMaterial)

モードを判定する

モードごとに異なるコンテンツが本当に必要な場合は、@Environment(\.colorScheme)で現在の外観を読み取ります。

@Environment(\.colorScheme) var scheme

Schemeで分岐する

colorSchemeを取得すると、semantic colorでは対応できない場合に限り、ロゴの切り替えのように使用するアセットを選べます。

Image(scheme == .dark ? "logoDark" : "logoLight")

両方のモードをプレビューする

プレビューに.preferredColorScheme(.dark)を追加すると、Xcodeを離れずにDark Modeを確認できます。

#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}

モードを強制する

preferredColorSchemeで画面を特定のモードに固定できますが、可能な限りユーザーのシステム設定を尊重してください。

ContentView()
    .preferredColorScheme(.dark)

コントラストを確認する

どちらのモードでもテキストが読みやすいことを確認します。適切なcontrastは、単なるスタイルではなくアクセシビリティの一部です。

クイックチェック

LightとDark Modeの間で自動的に適応する色の選択肢はどれですか。

対話的なレッスンで答える

まとめ

どの外観でもアプリが適切に表示されるようになりました。semantic colors、アセットの色、マテリアルを活用し、両方のモードをプレビューしましょう。🌓

無料で開始

AI チューターと学ぶ Swift — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
30
レッスン
120
無料で学習を始めるコース全体を表示

よくある質問

「ライトモードとダークモードに対応する」レッスンは無料ですか？

はい。「ライトモードとダークモードに対応する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「ライトモードとダークモードに対応する」で何を学びますか？

両方の外観にセマンティックカラーを使います。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「ライトモードとダークモードに対応する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. VoiceOverとアクセシビリティラベル
  2. Dynamic Typeとスケーラブルフォント
  3. 文字列とString Catalogをローカライズする
  4. ライトモードとダークモードに対応する
← SwiftUI Academyに戻る