Jetpack Compose Academy · Урок

Тёмная тема и динамический цвет

Адаптируйте цвета к системе и обоям.

«Тёмная тема и динамический цвет» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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. 🎉

Часто задаваемые вопросы

Урок «Тёмная тема и динамический цвет» бесплатный?

Да — полный текст урока «Тёмная тема и динамический цвет» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Тёмная тема и динамический цвет»?

Адаптируйте цвета к системе и обоям. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Тёмная тема и динамический цвет»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Jetpack Compose Academy