前言

    使用 Material Design 的 Material Design 主題設定，以及自訂顏色、字體排版和形狀等指引。
    如何在 Compose 應用程式中套用 Material Design 主題設定。

Compose 主題剖析

主題系統類別

主題通常由多個子系統組成，這些子系統結合了共同的視覺元素和 行為概念這些系統可以使用 主題化值
舉例來說，MaterialTheme 包含

• ColorScheme (色彩系統)
• Typography (字體排版系統)
• Shapes (形狀系統)。

Theme.kt

@Composable
fun ironman2024themem(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = false,
    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,
        shapes = Shapes,
        content = content
    )
}

Color.kt

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

Shapes.kt

val Shapes = Shapes(
    small = RoundedCornerShape(50.dp),
)

Typography.kt

val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    )

套用Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Ironman2024Theme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "中秋節快樂",
                        from = "Kevin",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

文字

字體和顏色

Text(
     text = LocalContext.current.getString(congratulation.stringResourceId),
     modifier = Modifier.padding(16.dp),
     color = MaterialTheme.colorScheme.primary,
     style = MaterialTheme.typography.headlineSmall
)

Preview Theme

darkTheme = false

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Ironman2024Theme(darkTheme = false) {
        Greeting("中秋節快樂" , "Kevin")
    }
}

darkTheme = true

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Ironman2024Theme(darkTheme = true) {
        Greeting("中秋節快樂" , "Kevin")
    }
}