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(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit,
) =
    MaterialTheme(
        colorScheme = colorScheme,
        motionScheme = MaterialTheme.motionScheme,
        shapes = shapes,
        typography = typography,
        content = content,
    )

Parameters

colorSchemeA complete definition of the Material Color theme for this hierarchy
shapesA set of corner shapes to be used as this hierarchy's shape system
typographyA set of text styles to be used as this hierarchy's typography system
contentThe content inheriting this theme
Common
@ExperimentalMaterial3ExpressiveApi
@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    motionScheme: MotionScheme = MaterialTheme.motionScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit,
)

Parameters

colorSchemeA complete definition of the Material Color theme for this hierarchy
motionSchemeA complete definition of the Material Motion scheme for this hierarchy
shapesA set of corner shapes to be used as this hierarchy's shape system
typographyA set of text styles to be used as this hierarchy's typography system

Code Examples

MaterialThemeSample

@Preview
@Composable
fun MaterialThemeSample() {
    val isDarkTheme = isSystemInDarkTheme()
    val supportsDynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val lightColorScheme = lightColorScheme(primary = Color(0xFF1EB980))
    val darkColorScheme = darkColorScheme(primary = Color(0xFF66ffc7))
    val colorScheme =
        when {
            supportsDynamicColor && isDarkTheme -> {
                dynamicDarkColorScheme(LocalContext.current)
            }
            supportsDynamicColor && !isDarkTheme -> {
                dynamicLightColorScheme(LocalContext.current)
            }
            isDarkTheme -> darkColorScheme
            else -> lightColorScheme
        }
    val typography =
        Typography(
            displaySmall = TextStyle(fontWeight = FontWeight.W100, fontSize = 96.sp),
            labelLarge = TextStyle(fontWeight = FontWeight.W600, fontSize = 14.sp),
        )
    val shapes = Shapes(extraSmall = RoundedCornerShape(3.0.dp), small = RoundedCornerShape(6.0.dp))
    MaterialTheme(colorScheme = colorScheme, typography = typography, shapes = shapes) {
        val currentTheme = if (!isSystemInDarkTheme()) "light" else "dark"
        ExtendedFloatingActionButton(
            text = { Text("FAB with text style and color from $currentTheme theme") },
            icon = { Icon(Icons.Filled.Favorite, contentDescription = "Localized Description") },
            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

MaterialExpressiveTheme MediumExtendedFloatingActionButton