Руководство: Как добавить новую тему
Архитектура Chaos Alice позволяет легко добавлять новые темы, полностью меняющие интерфейс приложения. Вот пошаговое руководство.
1. Создайте Enum для новой темы
Откройте файл app/src/main/java/chaos/alice/pro/data/models/AppTheme.kt и добавьте свою тему.
enum class AppTheme(val displayName: String) {
DEFAULT("Стандартная"),
TELEGRAM("Telegram"),
CHAT_GPT("ChatGPT"),
YOUTUBE("YouTube"),
MY_COOL_THEME("Моя крутая тема") // Ваша новая тема
}
2. Создайте файлы для экранов темы
- Создайте новую директорию в
app/src/main/java/chaos/alice/pro/ui/theme/theming/. Например:mycooltheme. - Внутри этой папки создайте Kotlin-файлы для экранов, которые вы хотите переопределить. Как минимум, это
MyCoolThemeChatListScreen.ktиMyCoolThemeChatScreen.kt. - Вы можете скопировать код из
/ui/chatlist/ChatListScreen.ktи/ui/chat/ChatScreen.ktв качестве основы и начать вносить изменения в@Composable-функции.
3. (Опционально) Создайте цветовую схему
Если ваша тема требует уникальных цветов:
-
Добавьте свои цвета в
app/src/main/java/chaos/alice/pro/ui/theme/Color.kt. -
Создайте
lightColorSchemeиdarkColorSchemeдля вашей темы вapp/src/main/java/chaos/alice/pro/ui/theme/Theme.kt. -
Добавьте обработку вашей темы в основной функции
ChaosAliceProThemeв файлеTheme.kt:@Composable fun ChaosAliceProTheme( //... appTheme: AppTheme = AppTheme.DEFAULT, content: @Composable () -> Unit ) { val colorScheme = when { // ... appTheme == AppTheme.MY_COOL_THEME -> { // Добавьте ваш блок if (darkTheme) MyCoolThemeDarkScheme else MyCoolThemeLightScheme } // ... } // ... }
4. Зарегистрируйте тему в ThemeManager
Это самый важный шаг. Откройте app/src/main/java/chaos/alice/pro/ui/theme/theming/ThemeManager.kt.
- Импортируйте ваши новые экраны.
- Создайте новую конфигурацию
ThemeConfigдля вашей темы. - Добавьте обработку вашего
AppThemeвwhen-блоке.
// ... (импорты)
import chaos.alice.pro.ui.theme.theming.mycooltheme.MyCoolThemeChatListScreen
import chaos.alice.pro.ui.theme.theming.mycooltheme.MyCoolThemeChatScreen
// ... (data class ThemeConfig)
object ThemeManager {
fun getThemeConfig(theme: AppTheme): ThemeConfig {
return when (theme) {
// ...
AppTheme.MY_COOL_THEME -> myCoolTheme // Добавьте вашу тему
else -> defaultTheme
}
}
}
// ... (существующие конфигурации)
// Создайте свою конфигурацию
private val myCoolTheme = ThemeConfig(
chatListScreen = { onChatClicked, onSettingsClicked ->
MyCoolThemeChatListScreen(onChatClicked, onSettingsClicked)
},
chatScreen = { navController ->
MyCoolThemeChatScreen(navController)
}
)
5. Выберите тему в настройках
После пересборки проекта ваша новая тема появится в выпадающем списке в настройках приложения. Выберите её, сохраните и перезапустите приложение, чтобы увидеть изменения.