# MaterialTheme

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/MaterialTheme.composable#MaterialTheme(androidx.compose.material3.ColorScheme,androidx.compose.material3.Shapes,androidx.compose.material3.Typography,kotlin.Function0)( colorScheme: https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/Shapes, typography: https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Material Theming refers to the customization of your Material Design app to better reflect your product's brand. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/MaterialTheme.composable#MaterialTheme(androidx.compose.material3.ColorScheme,androidx.compose.material3.MotionScheme,androidx.compose.material3.Shapes,androidx.compose.material3.Typography,kotlin.Function0)( colorScheme: https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme, motionScheme: https://developer.android.com/reference/kotlin/androidx/compose/material3/MotionScheme, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/Shapes, typography: https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Material Theming refers to the customization of your Material Design app to better reflect your product's brand. | Cmn |

## Functions

### MaterialTheme

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/MaterialTheme.kt+function:MaterialTheme)

```
@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit
): Unit
```

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

Material components such as `https://developer.android.com/reference/kotlin/androidx/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/Checkbox.composable#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)` use values provided here when retrieving default values.

All values may be set by providing this component with the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/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.

```kotlin
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Shapes
import androidx.compose.material3.Text
import androidx.compose.material3.Typography
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

| Parameters |
|---|---|
| `colorScheme: https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme = MaterialTheme.colorScheme` | A complete definition of the Material Color theme for this hierarchy |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/Shapes = MaterialTheme.shapes` | A set of corner shapes to be used as this hierarchy's shape system |
| `typography: https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography = MaterialTheme.typography` | A set of text styles to be used as this hierarchy's typography system |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content inheriting this theme |

### MaterialTheme

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/MaterialTheme.kt+function:MaterialTheme)

```
@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    motionScheme: MotionScheme = MaterialTheme.motionScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit
): Unit
```

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

Material components such as `https://developer.android.com/reference/kotlin/androidx/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/Checkbox.composable#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)` use values provided here when retrieving default values.

All values may be set by providing this component with the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography` 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.

| Parameters |
|---|---|
| `colorScheme: https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme = MaterialTheme.colorScheme` | A complete definition of the Material Color theme for this hierarchy |
| `motionScheme: https://developer.android.com/reference/kotlin/androidx/compose/material3/MotionScheme = MaterialTheme.motionScheme` | A complete definition of the Material Motion scheme for this hierarchy |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/Shapes = MaterialTheme.shapes` | A set of corner shapes to be used as this hierarchy's shape system |
| `typography: https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography = MaterialTheme.typography` | A set of text styles to be used as this hierarchy's typography system |