---
title: "MaterialTheme"
description: "Material Theming refers to the customization of your Material Design app to better reflect your
product’s brand."
type: "component"
---

<div class='type'>Composable Component</div>



Material Theming refers to the customization of your Material Design app to better reflect your
product’s brand.

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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
```kotlin
@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 = {},
        )
    }
}
```