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 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,
		......
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

然后再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 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,

)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

@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 list
    DARK, LIGHT
}

private val CustomStyleScheme.theme: Pair<ColorScheme, CustomColorScheme>
    get() = when (this) {
        CustomStyleScheme.DARK -> DarkColorScheme to DarkCustomColorScheme
        CustomStyleScheme.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.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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

看看默认生成的是怎么写的，跟上面的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.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
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31