关于compose的主题配色

这篇文章主要是两点:

compose的日夜间模式

在使用jetpack compose时,我们最开始写每个页面时,往往不会注意他的配色问题,通常都是选择将每个颜色都固定.可是这就会导致一个问题.日夜间模式切换后,不会有任何变化,这就让夜间使用者体验很差.
因此需要了解这一方面的问题:

默认主题

jetpack Compose是符合Material Design3的规范的.因此我们很多东西都可以遵循其特点,来实现最好的开发方式.

关于compose的主题配色-2024-03-25-12-54-34
在Theme.kt里,我们可以看到如下代码:

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    background = Color(0xFF030303),
    onBackground = Color(0xFF25273D),
    onTertiary = Color.White
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    background = Color(0xFFFFFBFE),
    onBackground = Color.White,
    onTertiary = Color.Black
    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)
var isDarkTheme by mutableStateOf(false)
@Composable
fun TodoListTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = false,
    content: @Composable () -> Unit
) {...}

在这段代码里,isSystemInDarkTheme()是android自带的一个判断是否是夜间模式的方法,当他判断是夜间模式时,会选用上面的LightColorScheme或者DarkColorScheme,然后根据这些主题的配色自动选择他的颜色,
你也可以手动选择就像这种关于compose的主题配色-2024-03-25-13-01-56 .

当你遵循Material Design的设计后,在你选择切换夜间模式的时候,他的主题颜色也会随之变更
关于compose的主题配色-2024-03-25-13-05-08

更详细的内容可以看这个官方网站https://developer.android.com/codelabs/jetpack-compose-theming?hl=zh-cn#0
他也有推荐的主题适配工具https://m3.material.io/theme-builder#/custom

配置其他类型的主题

就是手动切换主题
他的大概思路就是:

构建一个枚举类,设计多个不同的主题样式

修改这段代码

val colorScheme = when {
    dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
        val context = LocalContext.current
        if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
    }

    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}