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

colorsA complete definition of the Material Color theme for this hierarchy
typographyA set of text styles to be used as this hierarchy's typography system
shapesA set of shapes to be used by the components in this hierarchy
contentThe 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 = {},
        )
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled

ListItem ModalBottomSheetLayout