ColorScheme
-
Cmn
class ColorScheme
A color scheme holds all the named color parameters for a MaterialTheme.
Color schemes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. There are two built-in baseline schemes, lightColorScheme and a darkColorScheme, that can be used as-is or customized.
The Material color system and custom schemes provide default values for color as a starting point for customization.
To learn more about colors, see Material Design colors.
Summary
Public constructors |
|
|---|---|
This function is deprecated. Use constructor with additional 'surfaceContainer' roles. |
Cmn
|
This function is deprecated. Use constructor with additional 'fixed' container roles. |
Cmn
|
ColorScheme( |
Cmn
|
Public functions |
||
|---|---|---|
ColorScheme |
copy(Returns a copy of this ColorScheme, optionally overriding some of the values. |
Cmn
|
open String |
toString() |
Cmn
|
Public properties |
||
|---|---|---|
Color |
The background color that appears behind scrollable content. |
Cmn
|
Color |
The error color is used to indicate errors in components, such as invalid text in a text field. |
Cmn
|
Color |
The preferred tonal color of error containers. |
Cmn
|
Color |
A color that contrasts well with |
Cmn
|
Color |
Color to be used as a "primary" color in places where the inverse color scheme is needed, such as the button on a SnackBar. |
Cmn
|
Color |
A color that contrasts sharply with |
Cmn
|
Color |
Color used for text and icons displayed on top of the background color. |
Cmn
|
Color |
Color used for text and icons displayed on top of the error color. |
Cmn
|
Color |
The color (and state variants) that should be used for content on top of |
Cmn
|
Color |
Color used for text and icons displayed on top of the primary color. |
Cmn
|
Color |
The color (and state variants) that should be used for content on top of |
Cmn
|
Color |
Color used for text and icons displayed on top of |
Cmn
|
Color |
An |
Cmn
|
Color |
Color used for text and icons displayed on top of the secondary color. |
Cmn
|
Color |
The color (and state variants) that should be used for content on top of |
Cmn
|
Color |
Color used for text and icons displayed on top of |
Cmn
|
Color |
An |
Cmn
|
Color |
Color used for text and icons displayed on top of the surface color. |
Cmn
|
Color |
The color (and state variants) that can be used for content on top of |
Cmn
|
Color |
Color used for text and icons displayed on top of the tertiary color. |
Cmn
|
Color |
The color (and state variants) that should be used for content on top of |
Cmn
|
Color |
Color used for text and icons displayed on top of |
Cmn
|
Color |
An |
Cmn
|
Color |
Subtle color used for boundaries. |
Cmn
|
Color |
Utility color used for boundaries for decorative elements when strong contrast is not required. |
Cmn
|
Color |
The primary color is the color displayed most frequently across your app’s screens and components. |
Cmn
|
Color |
The preferred tonal color of containers. |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
Color of a scrim that obscures content. |
Cmn
|
Color |
The secondary color provides more ways to accent and distinguish your product. |
Cmn
|
Color |
A tonal color to be used in containers. |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
The surface color that affect surfaces of components, such as cards, sheets, and menus. |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Color |
This color will be used by components that apply tonal elevation and is applied on top of |
Cmn
|
Color |
Another option for a color with similar uses of |
Cmn
|
Color |
The tertiary color that can be used to balance primary and secondary colors, or bring heightened attention to an element such as an input field. |
Cmn
|
Color |
A tonal color to be used in containers. |
Cmn
|
Color |
A |
Cmn
|
Color |
A |
Cmn
|
Extension functions |
||
|---|---|---|
Color |
ColorScheme.contentColorFor(backgroundColor: Color)The Material color system contains pairs of colors that are typically used for the background and content color inside a component. |
Cmn
|
Color |
ColorScheme.surfaceColorAtElevation(elevation: Dp)Computes the surface tonal color at different elevation levels e.g. surface1 through surface5. |
Cmn
|
Public constructors
ColorScheme
ColorScheme(
primary: Color,
onPrimary: Color,
primaryContainer: Color,
onPrimaryContainer: Color,
inversePrimary: Color,
secondary: Color,
onSecondary: Color,
secondaryContainer: Color,
onSecondaryContainer: Color,
tertiary: Color,
onTertiary: Color,
tertiaryContainer: Color,
onTertiaryContainer: Color,
background: Color,
onBackground: Color,
surface: Color,
onSurface: Color,
surfaceVariant: Color,
onSurfaceVariant: Color,
surfaceTint: Color,
inverseSurface: Color,
inverseOnSurface: Color,
error: Color,
onError: Color,
errorContainer: Color,
onErrorContainer: Color,
outline: Color,
outlineVariant: Color,
scrim: Color
)
ColorScheme
ColorScheme(
primary: Color,
onPrimary: Color,
primaryContainer: Color,
onPrimaryContainer: Color,
inversePrimary: Color,
secondary: Color,
onSecondary: Color,
secondaryContainer: Color,
onSecondaryContainer: Color,
tertiary: Color,
onTertiary: Color,
tertiaryContainer: Color,
onTertiaryContainer: Color,
background: Color,
onBackground: Color,
surface: Color,
onSurface: Color,
surfaceVariant: Color,
onSurfaceVariant: Color,
surfaceTint: Color,
inverseSurface: Color,
inverseOnSurface: Color,
error: Color,
onError: Color,
errorContainer: Color,
onErrorContainer: Color,
outline: Color,
outlineVariant: Color,
scrim: Color,
surfaceBright: Color,
surfaceDim: Color,
surfaceContainer: Color,
surfaceContainerHigh: Color,
surfaceContainerHighest: Color,
surfaceContainerLow: Color,
surfaceContainerLowest: Color
)
ColorScheme
ColorScheme(
primary: Color,
onPrimary: Color,
primaryContainer: Color,
onPrimaryContainer: Color,
inversePrimary: Color,
secondary: Color,
onSecondary: Color,
secondaryContainer: Color,
onSecondaryContainer: Color,
tertiary: Color,
onTertiary: Color,
tertiaryContainer: Color,
onTertiaryContainer: Color,
background: Color,
onBackground: Color,
surface: Color,
onSurface: Color,
surfaceVariant: Color,
onSurfaceVariant: Color,
surfaceTint: Color,
inverseSurface: Color,
inverseOnSurface: Color,
error: Color,
onError: Color,
errorContainer: Color,
onErrorContainer: Color,
outline: Color,
outlineVariant: Color,
scrim: Color,
surfaceBright: Color,
surfaceDim: Color,
surfaceContainer: Color,
surfaceContainerHigh: Color,
surfaceContainerHighest: Color,
surfaceContainerLow: Color,
surfaceContainerLowest: Color,
primaryFixed: Color,
primaryFixedDim: Color,
onPrimaryFixed: Color,
onPrimaryFixedVariant: Color,
secondaryFixed: Color,
secondaryFixedDim: Color,
onSecondaryFixed: Color,
onSecondaryFixedVariant: Color,
tertiaryFixed: Color,
tertiaryFixedDim: Color,
onTertiaryFixed: Color,
onTertiaryFixedVariant: Color
)
Public functions
copy
fun copy(
primary: Color = this.primary,
onPrimary: Color = this.onPrimary,
primaryContainer: Color = this.primaryContainer,
onPrimaryContainer: Color = this.onPrimaryContainer,
inversePrimary: Color = this.inversePrimary,
secondary: Color = this.secondary,
onSecondary: Color = this.onSecondary,
secondaryContainer: Color = this.secondaryContainer,
onSecondaryContainer: Color = this.onSecondaryContainer,
tertiary: Color = this.tertiary,
onTertiary: Color = this.onTertiary,
tertiaryContainer: Color = this.tertiaryContainer,
onTertiaryContainer: Color = this.onTertiaryContainer,
background: Color = this.background,
onBackground: Color = this.onBackground,
surface: Color = this.surface,
onSurface: Color = this.onSurface,
surfaceVariant: Color = this.surfaceVariant,
onSurfaceVariant: Color = this.onSurfaceVariant,
surfaceTint: Color = this.surfaceTint,
inverseSurface: Color = this.inverseSurface,
inverseOnSurface: Color = this.inverseOnSurface,
error: Color = this.error,
onError: Color = this.onError,
errorContainer: Color = this.errorContainer,
onErrorContainer: Color = this.onErrorContainer,
outline: Color = this.outline,
outlineVariant: Color = this.outlineVariant,
scrim: Color = this.scrim,
surfaceBright: Color = this.surfaceBright,
surfaceDim: Color = this.surfaceDim,
surfaceContainer: Color = this.surfaceContainer,
surfaceContainerHigh: Color = this.surfaceContainerHigh,
surfaceContainerHighest: Color = this.surfaceContainerHighest,
surfaceContainerLow: Color = this.surfaceContainerLow,
surfaceContainerLowest: Color = this.surfaceContainerLowest,
primaryFixed: Color = this.primaryFixed,
primaryFixedDim: Color = this.primaryFixedDim,
onPrimaryFixed: Color = this.onPrimaryFixed,
onPrimaryFixedVariant: Color = this.onPrimaryFixedVariant,
secondaryFixed: Color = this.secondaryFixed,
secondaryFixedDim: Color = this.secondaryFixedDim,
onSecondaryFixed: Color = this.onSecondaryFixed,
onSecondaryFixedVariant: Color = this.onSecondaryFixedVariant,
tertiaryFixed: Color = this.tertiaryFixed,
tertiaryFixedDim: Color = this.tertiaryFixedDim,
onTertiaryFixed: Color = this.onTertiaryFixed,
onTertiaryFixedVariant: Color = this.onTertiaryFixedVariant
): ColorScheme
Returns a copy of this ColorScheme, optionally overriding some of the values.
Public properties
error
val error: Color
The error color is used to indicate errors in components, such as invalid text in a text field.
inverseOnSurface
val inverseOnSurface: Color
A color that contrasts well with inverseSurface. Useful for content that sits on top of containers that are inverseSurface.
inversePrimary
val inversePrimary: Color
Color to be used as a "primary" color in places where the inverse color scheme is needed, such as the button on a SnackBar.
inverseSurface
val inverseSurface: Color
A color that contrasts sharply with surface. Useful for surfaces that sit on top of other surfaces with surface color.
onBackground
val onBackground: Color
Color used for text and icons displayed on top of the background color.
onErrorContainer
val onErrorContainer: Color
The color (and state variants) that should be used for content on top of errorContainer.
onPrimaryContainer
val onPrimaryContainer: Color
The color (and state variants) that should be used for content on top of primaryContainer.
onPrimaryFixed
val onPrimaryFixed: Color
Color used for text and icons displayed on top of primaryFixed or primaryFixedDim. Maintains the same tone in light and dark themes.
onPrimaryFixedVariant
val onPrimaryFixedVariant: Color
An onPrimaryFixed variant which provides less emphasis. Useful when a strong contrast is not required.
onSecondary
val onSecondary: Color
Color used for text and icons displayed on top of the secondary color.
onSecondaryContainer
val onSecondaryContainer: Color
The color (and state variants) that should be used for content on top of secondaryContainer.
onSecondaryFixed
val onSecondaryFixed: Color
Color used for text and icons displayed on top of secondaryFixed or secondaryFixedDim. Maintains the same tone in light and dark themes.
onSecondaryFixedVariant
val onSecondaryFixedVariant: Color
An onSecondaryFixed variant which provides less emphasis. Useful when a strong contrast is not required.
onSurfaceVariant
val onSurfaceVariant: Color
The color (and state variants) that can be used for content on top of surface.
onTertiary
val onTertiary: Color
Color used for text and icons displayed on top of the tertiary color.
onTertiaryContainer
val onTertiaryContainer: Color
The color (and state variants) that should be used for content on top of tertiaryContainer.
onTertiaryFixed
val onTertiaryFixed: Color
Color used for text and icons displayed on top of tertiaryFixed or tertiaryFixedDim. Maintains the same tone in light and dark themes.
onTertiaryFixedVariant
val onTertiaryFixedVariant: Color
An onTertiaryFixed variant which provides less emphasis. Useful when a strong contrast is not required.
outline
val outline: Color
Subtle color used for boundaries. Outline color role adds contrast for accessibility purposes.
outlineVariant
val outlineVariant: Color
Utility color used for boundaries for decorative elements when strong contrast is not required.
primary
val primary: Color
The primary color is the color displayed most frequently across your app’s screens and components.
primaryFixed
val primaryFixed: Color
A primary variant that maintains the same tone in light and dark themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.
primaryFixedDim
val primaryFixedDim: Color
A primary variant that maintains the same tone in light and dark themes. Dim roles provide a stronger, more emphasized tone relative to the equivalent fixed color.
secondary
val secondary: Color
The secondary color provides more ways to accent and distinguish your product. Secondary colors are best for:
-
Floating action buttons
-
Selection controls, like checkboxes and radio buttons
-
Highlighting selected text
-
Links and headlines
secondaryFixed
val secondaryFixed: Color
A secondary variant that maintains the same tone in light and dark themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.
secondaryFixedDim
val secondaryFixedDim: Color
A secondary variant that maintains the same tone in light and dark themes. Dim roles provide a stronger, more emphasized tone relative to the equivalent fixed color.
surface
val surface: Color
The surface color that affect surfaces of components, such as cards, sheets, and menus.
surfaceBright
val surfaceBright: Color
A surface variant that is always brighter than surface, whether in light or dark mode.
surfaceContainer
val surfaceContainer: Color
A surface variant that affects containers of components, such as cards, sheets, and menus.
surfaceContainerHigh
val surfaceContainerHigh: Color
A surface variant for containers with higher emphasis than surfaceContainer. Use this role for content which requires more emphasis than surfaceContainer.
surfaceContainerHighest
val surfaceContainerHighest: Color
A surface variant for containers with higher emphasis than surfaceContainerHigh. Use this role for content which requires more emphasis than surfaceContainerHigh.
surfaceContainerLow
val surfaceContainerLow: Color
A surface variant for containers with lower emphasis than surfaceContainer. Use this role for content which requires less emphasis than surfaceContainer.
surfaceContainerLowest
val surfaceContainerLowest: Color
A surface variant for containers with lower emphasis than surfaceContainerLow. Use this role for content which requires less emphasis than surfaceContainerLow.
surfaceDim
val surfaceDim: Color
A surface variant that is always dimmer than surface, whether in light or dark mode.
surfaceTint
val surfaceTint: Color
This color will be used by components that apply tonal elevation and is applied on top of surface. The higher the elevation the more this color is used.
tertiary
val tertiary: Color
The tertiary color that can be used to balance primary and secondary colors, or bring heightened attention to an element such as an input field.
tertiaryFixed
val tertiaryFixed: Color
A tertiary variant that maintains the same tone in light and dark themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.
tertiaryFixedDim
val tertiaryFixedDim: Color
A tertiary variant that maintains the same tone in light and dark themes. Dim roles provide a stronger, more emphasized tone relative to the equivalent fixed color.
Extension functions
contentColorFor
fun ColorScheme.contentColorFor(backgroundColor: Color): Color
The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a Button typically uses primary for its background, and onPrimary for the color of its content (usually text or iconography).
This function tries to match the provided backgroundColor to a 'background' color in this ColorScheme, and then will return the corresponding color used for content. For example, when backgroundColor is ColorScheme.primary, this will return ColorScheme.onPrimary.
If backgroundColor does not match a background color in the theme, this will return Color.Unspecified.
| Returns | |
|---|---|
Color |
the matching content color for |
| See also | |
|---|---|
contentColorFor |
surfaceColorAtElevation
fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color
Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.
| Parameters | |
|---|---|
elevation: Dp |
Elevation value used to compute alpha of the color overlay layer. |
| Returns | |
|---|---|
Color |
the |