← Назад к вопросам

Как организовать тему в приложении

2.0 Middle🔥 111 комментариев
#UI и вёрстка

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как организовать тему в приложении

Тема — это централизованная система стилей и цветов. Вот современный подход на Material 3.

1. Структура файлов

res/
├── values/colors.xml
├── values/themes.xml
├── values/dimens.xml
├── values-night/colors.xml
└── values-v31/themes.xml

2. Цвета (colors.xml Light)

<color name="md_theme_light_primary">#6750a4</color>
<color name="md_theme_light_background">#fffbfe</color>
<color name="md_theme_light_surface">#fffbfe</color>
<color name="md_theme_light_error">#b3261e</color>

3. Темная тема (values-night/colors.xml)

<color name="md_theme_light_primary">#d0bcff</color>
<color name="md_theme_light_background">#1c1b1f</color>
<color name="md_theme_light_surface">#1c1b1f</color>

4. Определение темы (themes.xml)

<style name="Theme.MyApp" parent="Theme.Material3.Light">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorSecondary">@color/md_theme_light_secondary</item>
    <item name="colorError">@color/md_theme_light_error</item>
    <item name="android:colorBackground">@color/md_theme_light_background</item>
    <item name="colorSurface">@color/md_theme_light_surface</item>
</style>

5. Использование в XML

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="?attr/colorPrimary"
    android:text="Click" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="?attr/colorOnBackground" />

6. Dark Mode в коде

AppCompatDelegate.setDefaultNightMode(
    AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
)

7. Размеры (dimens.xml)

<dimen name="spacing_xs">4dp</dimen>
<dimen name="spacing_md">16dp</dimen>
<dimen name="corner_radius_md">8dp</dimen>

8. Типографика (typography.xml)

<style name="TextAppearance.App.HeadlineLarge" parent="TextAppearance.Material3.HeadlineLarge" />
<style name="TextAppearance.App.BodyMedium" parent="TextAppearance.Material3.BodyMedium" />

Ключевые моменты:

  • Один набор цветов в colors.xml (dark version в values-night/)
  • Не хардкодируй цвета — используй ?attr/colorXxx
  • Material 3 как база — автоматическая поддержка темной темы
  • Динамические цвета на Android 12+ (DynamicColors)
  • Масштабируемо — просто добавить новый цвет в colors.xml

Проверка тёмной темы в коде

fun isDarkMode(context: Context): Boolean {
    val mode = context.resources.configuration.uiMode
    return (mode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
}

Лучшие практики

✅ Используй Material Design систему ✅ Один главный файл colors.xml ✅ Темная версия в values-night/ ✅ Все размеры в dimens.xml ✅ ?attr/colorXxx вместо #abc123 ✅ MODE_NIGHT_FOLLOW_SYSTEM для следования системе

Как организовать тему в приложении | PrepBro