Jetpack Compose Academy · レッスン

ダークモードとDynamic Color

システムと壁紙に合わせて色を調整します。

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

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Two Palettes, One App

A polished app ships both a light and a dark palette. You define them as separate colorScheme objects and switch between them at the theme level. 🌙

Detect the System Setting

You ask the system which mode is active with isSystemInDarkTheme, a Composable that returns true when the user prefers dark.

val dark = isSystemInDarkTheme()

Pick the Scheme

With that flag you choose which palette to pass into MaterialTheme, so the app follows the system dark mode setting automatically.

val scheme = if (dark) darkColorScheme()
  else lightColorScheme()

darkColorScheme Defaults

The darkColorScheme builder ships sensible low-light defaults, so even before customizing you get readable, comfortable dark surfaces.

Contrast Still Matters

In dark mode you keep the same color roles, but tune surfaces darker and on-colors lighter so text stays easy to read.

What Is Dynamic Color

Dynamic color is Material You magic: on Android 12 and up the system can derive your palette from the user's wallpaper. 🎨

Check the Android Version

Dynamic color needs API 31 or higher, so you gate it with a version check before reaching for the wallpaper-based scheme.

val supported = Build.VERSION.SDK_INT >= 31

Build a Dynamic Scheme

When supported, you call dynamicLightColorScheme or its dark variant with a context to pull colors straight from the wallpaper.

dynamicDarkColorScheme(context)

Always Have a Fallback

On older devices dynamic color is unavailable, so you fall back to your hand-crafted colorScheme to keep branding intact.

Wire It Together

Your theme picks dynamic when allowed, else dark or light by system setting, so one colorScheme choice handles every case.

val scheme = when {
  dynamicOk && dark -> dynamicDarkColorScheme(ctx)
  dark -> darkColorScheme()
  else -> lightColorScheme()
}

Test Both Modes

Preview your screens in light and dark, and on a colorful wallpaper, so dynamic color never surprises you with unreadable combos. ✨

Quick Check

A user on Android 13 sets a purple wallpaper. What can your theme do?

Recap: Adaptive, Personal Color

You detected the system mode with isSystemInDarkTheme, swapped palettes, and layered dynamic color with a safe fallback. 🎉

よくある質問

「ダークモードとDynamic Color」レッスンは無料ですか？

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

「ダークモードとDynamic Color」で何を学びますか？

システムと壁紙に合わせて色を調整します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ダークモードとDynamic Color」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る