7、Copmose自定义颜色和主题切换

Copmose自定义颜色和主题切换

一起颜色���设置的都是在res/values/colors里面去做颜色， 但是当使用compose的时候，抛弃了使用了ui.theme底下的Color.kt和Theme.kt 但是默认使用的是MaterialTheme主题，里面的颜色字段不能定义，因此需要自定义这个：

我先查看MaterialTheme 里面的颜色主题是怎么定义的，然后照葫芦画瓢。

android官网 对应自定义的解释，可以根据官网来进行操作

Compose 中的自定义设计系统

CustomColorScheme.kt

import androidx.compose.runtime.Stableimport androidx.compose.runtime.getValueimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.setValueimport androidx.compose.ui.graphics.Color@Stableclass CustomColorScheme(    pureWhite: Color,    pureBlack: Color,    homeButtonBg: Color,    textColor: Color,......// 根据项目需要去添加字段) {    var pureWhite by mutableStateOf(pureWhite)        private set    var pureBlack by mutableStateOf(pureBlack)        private set    var homeButtonBg by mutableStateOf(homeButtonBg)        private set    var textColor by mutableStateOf(textColor)        private set......    fun update(colors: CustomColorScheme) {        this.pureWhite = colors.pureWhite        this.pureBlack = colors.pureBlack        this.homeButtonBg = colors.homeButtonBg        this.textColor = colors.textColor        ......    }    fun copy() = CustomColorScheme(        pureWhite,        pureBlack,        homeButtonBg,        textColor,......    )}

然后再Theme.kt里面添加，DarkCustomColorScheme 和 LightCustomColorScheme实现自定义的颜色

// DarkColorScheme LightColorScheme 这个两个是系统默认的，使用的是MaterialThemeprivate val DarkColorScheme = darkColorScheme(    primary = Purple80,    secondary = PurpleGrey80,    tertiary = Pink80)private val LightColorScheme = lightColorScheme(    primary = Purple40,    secondary = PurpleGrey40,    tertiary = Pink40    /* 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),    */)/** Color Scheme object */// 黑夜private val DarkCustomColorScheme = CustomColorScheme(    // temp use light    pureBlack = NeutralBlack0100,    pureWhite = PrimaryPureWhite,    homeButtonBg = NeutralGrey8015,    textColor = NeutralGrey2076, ) 白天private val LightCustomColorScheme = CustomColorScheme(    pureBlack = NeutralBlack0100,    pureWhite = PrimaryPureWhite,    homeButtonBg = NeutralGrey8015,    textColor = NeutralGrey2076,)

之后继续添加下面的，这些

@Composablefun ProvideAppColors(colors: CustomColorScheme, content: @Composable () -> Unit) {    val colorPalette = remember {        colors.copy()    }    colorPalette.update(colors)    CompositionLocalProvider(LocalCustomColors provides colorPalette, content = content)}// create static CompositionLocalprivate val LocalCustomColors = staticCompositionLocalOf {    DarkCustomColorScheme}// 可以自己自定义添加enum class CustomStyleScheme {    // theme list    DARK, LIGHT}private val CustomStyleScheme.theme: Pair    get() = when (this) {        CustomStyleScheme.DARK -> DarkColorScheme to DarkCustomColorScheme        CustomStyleScheme.LIGHT -> LightColorScheme to LightCustomColorScheme    }// 这个添加了@Composable 说明是可组合函数，界面可以拿他进行设置颜色@Composablefun AppTheme(    /* Can use 'var pallet by mutableStateOf(CustomStyleScheme.LIGHT)' to choose app theme    *  now use isSystemInDarkTheme to judge dark or light    */    darkTheme: Boolean = isSystemInDarkTheme(),//    customTheme: CustomStyleScheme = AppTheme.pallet, //    content: @Composable () -> Unit) {    val customTheme = when {        darkTheme -> CustomStyleScheme.DARK        else -> CustomStyleScheme.LIGHT    }    val (colorScheme, customColors) = customTheme.theme    ProvideAppColors(colors = customColors) {        MaterialTheme(            colorScheme = colorScheme,            typography = Typography,            content = content        )    }}/** AppTheme manager */object AppTheme {    val customColors: CustomColorScheme        @Composable        get() = LocalCustomColors.current    var pallet by mutableStateOf(CustomStyleScheme.LIGHT)}

看看默认生成的是怎么写的，跟上面的AppTheme差不多，只是我多了一个选择

@Composablefun ExtTheme(    darkTheme: Boolean = isSystemInDarkTheme(),    // Dynamic color is available on Android 12+    dynamicColor: Boolean = true,    content: @Composable () -> Unit) {    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    }    val view = LocalView.current    if (!view.isInEditMode) {        SideEffect {            val window = (view.context as Activity).window            window.statusBarColor = colorScheme.primary.toArgb()            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme        }    }    MaterialTheme(        colorScheme = colorScheme,        typography = Typography,        content = content    )}