iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Mobile Development

Kotlin Android Jetpack 系列 第 23

{Day23}Jetpack compose Theme

Jetpack compose Theme

目前手機都支持黑暗模式,所以需要取得目前手機的狀態來達到自己本身APP的主題顏色。

明亮模式

val LightColor = lightColors(primary = Color.White, secondary = Color.Black, primaryVariant = Color.Cyan)

黑暗模式

val DarkColor = darkColors(primary = Color.Black, secondary = Color.White, primaryVariant = Color.Blue)

判斷模式

@Composable
fun DemoTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColor
    } else {
        LightColor
    }

    MaterialTheme(colors = colors, content = content)
}

配合其他語法來創建UI

@Preview(showBackground = true)
@Composable
fun demo() {
    //黑暗模式
    DemoTheme(darkTheme = true) {
        Surface(color = MaterialTheme.colors.primary) {
            GetContent(listOf("Hello", "Hello World"))
        }
    }
}
 
@Composable
fun GetContent(names: List<String>) {
    Column(Modifier.padding(16.dp)) {
        //用for迴圈創建View
        for (name in names) {
            Text(text = name, color = MaterialTheme.colors.secondary)
            Divider(color = MaterialTheme.colors.primaryVariant)
        }
    }
}


上一篇
{Day22}Jetpack compose View
下一篇
{Day24}DataStore-Preferences DataStore
系列文
Kotlin Android Jetpack 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言