Цветной объект, который меняется в темном режиме, например MaterialTheme.colors, но с пользовательскими цветами моего собственного приложения

#android #kotlin #android-jetpack-compose

Вопрос:

Как у меня может быть пользовательский объект цвета для моего приложения, который меняется вместе isSystemInDarkTheme() с ним? Я хочу добиться чего-то подобного MaterialColors.colors.primary , но с пользовательскими цветами для моего приложения.

Я хочу использовать его так:

 @Composable
fun MyView() {
    Surface(color = MyAppColors.CustomColor /*Color changes when isSystemInDarkTheme() changes*/) {
        ...
    }
}
 

Ответ №1:

  1. Вы можете объявлять цвета один за другим, используя isSystemInDarkTheme
 object MyAppColors {
    val CustomColor: Color
        @Composable
        @ReadOnlyComposable
        get() = if (isSystemInDarkTheme()) {
            Color.Red
        }
        else {
            Color.Gray
        }
}
 
  1. Полностью дублируйте MaterialTheme логику для ваших цветов. Я думаю, что это не правильный путь и более эффективный:
 object MyAppColors {
    val YourPrimary: Color
        @Composable
        @ReadOnlyComposable
        get() = LocalColors.current.yourPrimary
}

data class CustomColors(
    val yourPrimary: Color,
)

val DarkThemeColors = CustomColors(
    yourPrimary = Color.Red
)

val LightThemeColors = CustomColors(
    yourPrimary = Color.Gray
)

val LocalColors = staticCompositionLocalOf { LightThemeColors }

@Composable
fun ComposeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkThemeColors
    } else {
        LightThemeColors
    }

    CompositionLocalProvider(
        LocalColors provides colors
    ) {
        content()
    }
}
 

Использование:

 setContent {
    ComposeTheme {
        Surface(color = MyAppColors.YourPrimary, ...)
    }
}