MaterialTheme

Common/AllAndroid/JVM

Functions summary

Unit

@Composable MaterialTheme(     colors: Colors,     typography: Typography,     shapes: Shapes,     content: @Composable () -> Unit ) Material Theming

Cmn

Functions

MaterialTheme

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.0.0

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
): Unit

Material Theming

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

Material components such as Button and Checkbox use values provided here when retrieving default values.

It defines colors as specified in the Material Color theme creation spec, typography defined in the Material Type Scale spec, and shapes defined in the Shape scheme.

All values may be set by providing this component with the colors, typography, and shapes attributes. Use this to configure the overall theme of elements within this MaterialTheme.

Any values that are not set will inherit the current value from the theme, falling back to the defaults if there is no parent MaterialTheme. This allows using a MaterialTheme at the top of your application, and then separate MaterialTheme(s) for different screens / parts of your UI, overriding only the parts of the theme definition that need to change.

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.Typography
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

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

Parameters
colors: Colors = MaterialTheme.colors	A complete definition of the Material Color theme for this hierarchy
typography: Typography = MaterialTheme.typography	A set of text styles to be used as this hierarchy's typography system
shapes: Shapes = MaterialTheme.shapes	A set of shapes to be used by the components in this hierarchy
content: @Composable () -> Unit	The content inheriting this theme