前言

昨天我們花了幾分鐘做輸出好顏色檔案。接下來就是使用它啦！

加入 Theme.kt 和 Colot.kt

輸出檔案解壓縮後得到兩個檔案

開新的 compose 專案

在ui.theme 下面會有 Color.kt、Shape.kt 、Type.kt、 Theme.kt
Type.kt 定義字體
Shape.kt 定義形狀
Color.kt 定義顏色
最後彙整到 Theme.kt

這邊我們直接把解壓縮的 Color.kt 和 Theme.kt 貼上 ui.theme 覆蓋掉。
如果看到這麼多顏色名稱被嚇到的，可以去看昨天的顏色名字介紹。

記得要加入依賴

  implementation "androidx.compose.material3:material3:1.0.0-beta02"

material3最新版本

這樣我們的專案就套用好我們設定的顏色啦！

動態顏色

只有M3顏色還不夠，我們來試試Android12的動態顏色。
在 theme.kt 裡，修改AppTheme()。

@Composable
fun KTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    // Dynamic color is available on Android 12+
    val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colorScheme = when {
        dynamicColor && useDarkTheme -> dynamicDarkColorScheme(LocalContext.current)
        dynamicColor && !useDarkTheme -> dynamicLightColorScheme(LocalContext.current)
        useDarkTheme -> DarkColors
        else -> LightColors
    }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

KTheme 剛剛在覆蓋檔案時，主題名稱改掉，可以改回 ProjectName+Theme
useDarkTheme 預設值為 isSystemInDarkTheme() 來確認當下是否使用黑暗模式。
dynamicColor 用來檢查是否是 android 12 以上的版本
colorScheme 由 dynamicColor 和 useDarkTheme 來對應要使用的顏色們。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KTheme {
                Column() {
                    Button(onClick = { /*TODO*/ }) {
                        Text(text = "Button")
                    }
                    Text(
                        text = "Hello M3 theming",
                        color = MaterialTheme.colorScheme.tertiary
                    )
                }
            }
        }
    }
}

在 MainAcitivity 加入一個按鈕和文字，用column包裹起來
然後按下執行

Andrdoi 12 可以更換主題色，選了之後回到APP就可以看到顏色已經套用囉！

注意 MaterialTheme. import 記得選擇 Material3 喔！

如果有遇到ActivityNotFoundException可能是因為Android 12 +(TargetSDK = 31+)，四大组件如果使用了 intent-filter ，就必須在Mainifiest  android:exported="true" 否則會抛出錯誤。

結論

感謝 material3 顏色生成器，讓我們的明暗主題色生成地如此輕鬆。
今天還嘗試了Android12+動態顏色，讓APP不在一塵不變，也能更好地融入個人化主題裡ㄡ

參考資料

Dynamic Color 文檔
如果想瞭解 .xml 怎麼運用動態顏色 可以參考這個 codelab

今日運動
間歇運動 拳擊50分鐘 可以練心肺和手臂小腿背部（看來我要為app 設置有氧運動的選項了嗎？）