Дизайн и прототипирование

Основы цветовой системы Material3 для Android-разработчиков

Реализация цветовой системы Material3 может показаться пугающей, но, используя компоненты Material Theme Builder и Material3 Compose, вы обнаружите, что тематизация намного проще и понятнее, чем без их использования.

Опубликовано

1 неделя назад

24.03.2025

Автор:

AppTractor

Material3 — это последняя итерация Material Design, с динамическим тематическим оформлением, обновленными компонентами и многим другим. Однако сам этот фреймворк может быть слишком подавляющим с его более чем 200 различными цветовыми вариантами и десятками страниц документации.

Хорошо, что на самом деле все не так сложно, и он может значительно облегчить жизнь разработчикам. И под облегчением я подразумеваю следующее:

Автоматическая тематизация всех Material3 компонентов
Темные и светлые цветовые схемы
Правильные цвета для различных состояний компонентов, о которых вы никогда не задумывались, например при «наведении»
Правильные контрасты между цветами для доступности и UX
Более чистая кодовая база!

И многое другое. В этой статье я расскажу, как работает система цветов Material3 и почему вы должны внедрить ее в свой Android-проект.

Понимание цветовых ролей Material3

Чтобы понять, как цвета применяются в вашем приложении, давайте немного вспомним, как устроена цветовая схема.

Цветовая схема Material3 состоит из трех высокоуровневых «цветовых ролей»: Primary, Secondary и Tertiary. Эти цвета применяются к компонентам в зависимости от их важности: FAB или кнопка «Вход» будут использовать основной цвет.

Основной цвет может быть основным цветом вашего бренда и поэтому используется для таких заметных компонентов, как основные кнопки. Вторичные цвета используются для акцентов, в то время как третичные встречаются реже.

Основы цветовой системы Material3 для Android-разработчиков

Диаграмма цветовых ролей

Вариации, например «On Primary», имеют правила применения: если ваша кнопка «Войти» использует основной цвет, то для текста на ней будет использоваться «On Primary». Соблюдение этих правил гарантирует, что ваше приложение будет читабельным и доступным.

Кнопка с фоном «Primary» и текстом «On Primary»

Почему это важно знать? Каждый компонент и каждое состояние имеют свои цвета, как описано в документации Material3. Простая кнопка имеет 7 состояний, каждое из которых имеет различные цвета. Вам не нужно беспокоиться о том, чтобы запомнить каждый из них!

Различные состояния и характеристики заполненной кнопки

Создание темы

Итак, как же объявить эти +200 цветов? Хорошая новость заключается в том, что это происходит практически автоматически. Вы точно не нужно создавать цветовую схему с нуля.

Есть два варианта: использовать плагин Material Theme Builder Figma или использовать онлайн Material Theme Builder.

Цвета, создаваемые конструктором Material Theme Builder

Оба конструктора работают одинаково:

Выберите исходный цвет, и все остальные цвета будут автоматически выведены из него
Экспортируйте сгенерированные .kt файлы
Поместите файлы в пакет ui.theme в вашем проекте Compose
Переименуйте AppTheme, если хотите

Вот и все! Теперь у вас есть полная кастомная система цветов Material3, примененная в вашем проекте.

Но как она работает?

За кулисами

Файл Theme.kt, который вы экспортировали, содержит следующий фрагмент кода:

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
  val colorScheme = when {
      darkTheme -> darkScheme
      else -> lightScheme
  }

  MaterialTheme(
    colorScheme = colorScheme,
    typography = AppTypography,
    content = content
  )
}

​x
 
@Composablefun AppTheme(    darkTheme: Boolean = isSystemInDarkTheme(),    content: @Composable() () -> Unit) {  val colorScheme = when {      darkTheme -> darkScheme      else -> lightScheme  }​  MaterialTheme(    colorScheme = colorScheme,    typography = AppTypography,    content = content  )}

Здесь предопределенная colorScheme применяется к композиту MaterialTheme. Когда вы оборачиваете композабл элементы в свою тему, эти составные элементы получают доступ к colorScheme. Например, так можно применить тематизацию к @Previews.

@PreviewLightDark
@Composable
fun ButtonPreview() {
    AppTheme {
        Button(onClick = {}) {
            Text("This is onPrimary")
        }
    }
}

xxxxxxxxxx
 
@PreviewLightDark@Composablefun ButtonPreview() {    AppTheme {        Button(onClick = {}) {            Text("This is onPrimary")        }    }}

В приведенном выше фрагменте кода AppTheme передает определенный colorScheme кнопке через CompositionLocal. В результате получается полностью тематическая кнопка, поддерживающая режимы Light и Dark, без явного определения цветов.

Обратите внимание, что как фон, так и цвет текста отличаются.

Если вы посмотрите на исходный текст Material3 кнопки, то увидите, что по умолчанию для цветов используется значение ButtonDefaults.buttonColors(). Функция buttonColors() получает эти цвета из вашей MaterialTheme:

@Composable fun buttonColors() = MaterialTheme.colorScheme.defaultButtonColors

xxxxxxxxxx
 
@Composable fun buttonColors() = MaterialTheme.colorScheme.defaultButtonColors

Где применяются цвета?

Как вы уже догадались, цвета применяются ко всем компонентам Material3 и их состояниям, от простой Button до сложного TimePicker.

Темы

Как видно из приведенного выше, вы получите цвета как для темной, так и для светлой темы.

Таким образом, следующий фрагмент кода приводит к созданию полностью тематического компонента TimePicker, как для темной, так и для светлой темы.

@PreviewLightDark
@Composable
fun TimePickerPreview() {
    AppTheme {
        Surface {
            TimePicker(
                state = rememberTimePickerState(
                    initialHour = 11,
                    initialMinute = 11,
                    is24Hour = true,
                )
            )
        }
    }
}

xxxxxxxxxx
 
@PreviewLightDark@Composablefun TimePickerPreview() {    AppTheme {        Surface {            TimePicker(                state = rememberTimePickerState(                    initialHour = 11,                    initialMinute = 11,                    is24Hour = true,                )            )        }    }}

В результате получаются следующие превью:

TimePicker в светлой и темной темах

Состояния

А различные состояния? Да, цвета также автоматически применяются в зависимости от состояния.

Включенная и выключенная кнопка

Как видно из приведенного ниже фрагмента кода, изменение цвета фона кнопки и ее надписи напрямую зависит от свойства кнопки enabled:

@PreviewLightDark
@Composable
fun ButtonPreview() {
    ComposeColorsTheme {
        Surface {
            Row {
                Button(
                    onClick = {},
                    enabled = true
                ) {
                    Text("Login")
                }
                Button(
                    onClick = {},
                    enabled = false
                ) {
                    Text("Cancel")
                }
            }
        }
    }
}

xxxxxxxxxx
 
@PreviewLightDark@Composablefun ButtonPreview() {    ComposeColorsTheme {        Surface {            Row {                Button(                    onClick = {},                    enabled = true                ) {                    Text("Login")                }                Button(                    onClick = {},                    enabled = false                ) {                    Text("Cancel")                }            }        }    }}