Material3
MaterialTheme
Cистема тем, которая позволяет создавать UI в соответствии с Material Design. Она предоставляет единый источник стилистических параметров, таких как цвета, типографику и формы, делая интерфейс согласованным и легко настраиваемым.
MaterialTheme(
colorScheme = dynamicLightColorScheme(),
typography = Typography(),
shapes = Shapes()
) {
// Контент приложения с использованием Material 3
Text(
text = "Hello, Material 3!",
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.primary
)
}
colorScheme
Отвечает за управление цветовой палитрой приложения, обеспечивая гибкость и согласованность стиля. Вместо традиционной палитры (с primary
, secondary
и т.д.) в colorScheme
используется более детализированный набор цветов, поддерживающий динамическую тему и новые возможности кастомизации.
lightColorScheme
Создает цветовую палитру для светлой темы в Jetpack Compose.
val lightColors = lightColorScheme(
primary = Color(0xFF6200EE),
onPrimary = Color.White,
primaryContainer = Color(0xFFBB86FC),
onPrimaryContainer = Color.Black,
secondary = Color(0xFF03DAC6),
onSecondary = Color.Black,
background = Color(0xFFF5F5F5),
onBackground = Color.Black,
surface = Color.White,
onSurface = Color.Black,
error = Color(0xFFB00020),
onError = Color.White
)
MaterialTheme(
colorScheme = lightColors
) {
// Контент приложения
}
• primary
основной цвет интерфейса для акцентных элементов.
• onPrimary
цвет текста или иконок на фоне primary.
• primaryContainer
вариант основного цвета для контейнеров.
• onPrimaryContainer
цвет текста или иконок на фоне primaryContainer.
• inversePrimary
противоположный primary цвет для контраста на тёмных фонах.
• secondary
дополнительный цвет для менее акцентных элементов.
• onSecondary
цвет текста или иконок на фоне secondary.
• secondaryContainer
вариант дополнительного цвета для контейнеров.
• onSecondaryContainer
цвет текста или иконок на фоне secondaryContainer.
• tertiary
третичный цвет для нестандартных акцентов.
• onTertiary
цвет текста или иконок на фоне tertiary.
• tertiaryContainer
вариант третичного цвета для контейнеров.
• onTertiaryContainer
цвет текста или иконок на фоне tertiaryContainer.
• background
основной цвет фона приложения.
• onBackground
цвет текста или элементов на фоне background.
• surface
цвет поверхностного фона для карточек и меню.
• onSurface
цвет текста или элементов на фоне surface.
• surfaceVariant
изменённый цвет surface для выделения.
• onSurfaceVariant
цвет текста или элементов на фоне surfaceVariant.
• surfaceTint
оттенок для поверхностей с визуальными эффектами.
• inverseSurface
цвет для обратных поверхностей (тёмные на светлом фоне).
• inverseOnSurface
цвет текста или элементов на фоне inverseSurface.
• error
цвет для обозначения ошибок.
• onError
цвет текста или иконок на фоне error.
• errorContainer
цвет контейнера для сообщений об ошибках.
• onErrorContainer
цвет текста или иконок на фоне errorContainer.
• outline
цвет для рамок и разделителей.
• outlineVariant
альтернативный цвет для outline.
• scrim
полупрозрачный цвет для затенения заднего плана.
• surfaceBright
более яркий вариант surface.
• surfaceContainer
основной цвет контейнеров, близкий к surface.
• surfaceContainerHigh
более светлый вариант surfaceContainer.
• surfaceContainerHighest
максимально светлый вариант surfaceContainer.
• surfaceContainerLow
более тёмный вариант surfaceContainer.
• surfaceContainerLowest
самый тёмный вариант surfaceContainer.
• surfaceDim
затемнённый вариант surface для приглушённых элементов.
darkColorScheme
Создает цветовую палитру для тёмной темы в Jetpack Compose.
val darkColors = darkColorScheme(
primary = Color(0xFFBB86FC),
onPrimary = Color.Black,
primaryContainer = Color(0xFF3700B3),
onPrimaryContainer = Color.White,
secondary = Color(0xFF03DAC6),
onSecondary = Color.Black,
background = Color(0xFF121212),
onBackground = Color.White,
surface = Color(0xFF1F1F1F),
onSurface = Color.White,
error = Color(0xFFCF6679),
onError = Color.Black
)
MaterialTheme(
colorScheme = darkColors
) {
// Контент приложения
}
dynamicLightColorScheme
Создает динамическую цветовую палитру для светлой темы на основе цветов обоев пользователя. Доступна на устройствах с Android 12 (API 31) и выше и использует API Material You.
@Composable
fun MyApp() {
val context = LocalContext.current
val dynamicLightColors = if (Build.VERSION.SDK_INT >= 31) {
dynamicLightColorScheme(context)
} else {
lightColorScheme() // Стандартная палитра для устройств ниже Android 12
}
MaterialTheme(
colorScheme = dynamicLightColors
) {
// Контент приложения
}
}
dynamicDarkColorScheme
Cоздает динамическую цветовую палитру для тёмной темы на основе цветов обоев пользователя. Доступна на устройствах с Android 12 (API 31) и выше использует API Material You.
@Composable
fun MyApp() {
val context = LocalContext.current
val dynamicDarkColors = if (Build.VERSION.SDK_INT >= 31) {
dynamicDarkColorScheme(context)
} else {
darkColorScheme() // Стандартная палитра для устройств ниже Android 12
}
MaterialTheme(
colorScheme = dynamicDarkColors
) {
// Контент приложения
}
}
shapes
Отвечает за настройку формы и скругления углов компонентов в приложении, что позволяет создать уникальный и согласованный стиль интерфейса.
typography
Задаёт стили текстов в приложении, включая размер, начертание, межстрочный интервал и другие параметры для различных текстовых элементов, таких как заголовки, подзаголовки и основной текст.