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

Copmose自定义颜色和主题切换

一起颜色的设置的都是在res/values/colors里面去做颜色，但是当使用compose的时候，抛弃了使用了ui.theme底下的Color.kt和Theme.kt 但是默认使用的是MaterialTheme主题，里面的颜色字段不能定义，因此需要自定义这个：
我先查看MaterialTheme 里面的颜色主题是怎么定义的，然后照葫芦画瓢。
android官网对应自定义的解释，可以根据官网来进行操作

Compose 中的自定义设计系统

CustomColorScheme.kt


import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color@Stable
class CustomColorScheme(pureWhite: Color,pureBlack: Color,homeButtonBg: Color,textColor: Color,......// 根据项目需要去添加字段
) {var pureWhite by mutableStateOf(pureWhite)private setvar pureBlack by mutableStateOf(pureBlack)private setvar homeButtonBg by mutableStateOf(homeButtonBg)private setvar textColor by mutableStateOf(textColor)private set......fun update(colors: CustomColorScheme) {this.pureWhite = colors.pureWhitethis.pureBlack = colors.pureBlackthis.homeButtonBg = colors.homeButtonBgthis.textColor = colors.textColor......}fun copy() = CustomColorScheme(pureWhite,pureBlack,homeButtonBg,textColor,......)
}

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

// DarkColorScheme LightColorScheme 这个两个是系统默认的，使用的是MaterialTheme
private val DarkColorScheme = darkColorScheme(primary = Purple80,secondary = PurpleGrey80,tertiary = Pink80
)private val LightColorScheme = lightColorScheme(primary = Purple40,secondary = PurpleGrey40,tertiary = Pink40/* Other default colors to overridebackground = 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 lightpureBlack = NeutralBlack0100,pureWhite = PrimaryPureWhite,homeButtonBg = NeutralGrey8015,textColor = NeutralGrey2076,)白天
private val LightCustomColorScheme = CustomColorScheme(pureBlack = NeutralBlack0100,pureWhite = PrimaryPureWhite,homeButtonBg = NeutralGrey8015,textColor = NeutralGrey2076,)

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

@Composable
fun ProvideAppColors(colors: CustomColorScheme, content: @Composable () -> Unit) {val colorPalette = remember {colors.copy()}colorPalette.update(colors)CompositionLocalProvider(LocalCustomColors provides colorPalette, content = content)
}// create static CompositionLocal
private val LocalCustomColors = staticCompositionLocalOf {DarkCustomColorScheme
}// 可以自己自定义添加
enum class CustomStyleScheme {// theme listDARK, LIGHT
}private val CustomStyleScheme.theme: Pair<ColorScheme, CustomColorScheme>get() = when (this) {CustomStyleScheme.DARK -> DarkColorScheme to DarkCustomColorSchemeCustomStyleScheme.LIGHT -> LightColorScheme to LightCustomColorScheme}// 这个添加了@Composable 说明是可组合函数，界面可以拿他进行设置颜色
@Composable
fun 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.DARKelse -> CustomStyleScheme.LIGHT}val (colorScheme, customColors) = customTheme.themeProvideAppColors(colors = customColors) {MaterialTheme(colorScheme = colorScheme,typography = Typography,content = content)}
}/** AppTheme manager */
object AppTheme {val customColors: CustomColorScheme@Composableget() = LocalCustomColors.currentvar pallet by mutableStateOf(CustomStyleScheme.LIGHT)
}

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

@Composable
fun 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.currentif (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)}darkTheme -> DarkColorSchemeelse -> LightColorScheme}val view = LocalView.currentif (!view.isInEditMode) {SideEffect {val window = (view.context as Activity).windowwindow.statusBarColor = colorScheme.primary.toArgb()WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme}}MaterialTheme(colorScheme = colorScheme,typography = Typography,content = content)
}