MaterialTheme
Composable Component
Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.
Common
@Composable
fun MaterialTheme(
colors: Colors = MaterialTheme.colors,
typography: Typography = MaterialTheme.typography,
shapes: Shapes = MaterialTheme.shapes,
content: @Composable () -> Unit,
)
Parameters
colors | A complete definition of the Material Color theme for this hierarchy |
typography | A set of text styles to be used as this hierarchy's typography system |
shapes | A set of shapes to be used by the components in this hierarchy |
content | The content inheriting this theme |
Code Examples
MaterialThemeSample
@Composable
fun MaterialThemeSample() {
val lightColors = lightColors(primary = Color(0xFF1EB980))
val darkColors = darkColors(primary = Color(0xFF66ffc7))
val colors = if (isSystemInDarkTheme()) darkColors else lightColors
val typography =
Typography(
h1 = TextStyle(fontWeight = FontWeight.W100, fontSize = 96.sp),
button = TextStyle(fontWeight = FontWeight.W600, fontSize = 14.sp),
)
MaterialTheme(colors = colors, typography = typography) {
val currentTheme = if (MaterialTheme.colors.isLight) "light" else "dark"
ExtendedFloatingActionButton(
text = { Text("FAB with text style and color from $currentTheme theme") },
onClick = {},
)
}
}