Theme

It is a color palette definition, typically used to customize the overall look and feel of the app.

Properties

NameTypeDefaultDescription
primaryStringPrimary color of the theme.
onPrimaryStringColor for content on top of the primary color.
primaryContainerStringBackground container using the primary color.
onPrimaryContainerStringContent color on top of the primary container.
secondaryStringSecondary color used for less prominent components.
onSecondaryStringColor for content on top of the secondary color.
secondaryContainerStringBackground container using the secondary color.
onSecondaryContainerStringContent color on top of the secondary container.
tertiaryStringTertiary color used for accents and highlights.
onTertiaryStringColor for content on top of the tertiary color.
tertiaryContainerStringBackground container using the tertiary color.
onTertiaryContainerStringContent color on top of the tertiary container.
errorStringError color used to indicate problems.
errorContainerStringBackground container for error states.
onErrorStringColor for content on top of the error color.
onErrorContainerStringContent color on top of the error container.
backgroundStringApp background color.
onBackgroundStringColor for content on top of the background.
surfaceStringColor for surfaces such as cards and sheets.
onSurfaceStringColor for content on top of the surface.
surfaceVariantStringVariant of the surface color for differentiation.
onSurfaceVariantStringColor for content on top of the surface variant.
outlineStringColor for outlines and borders.
inverseOnSurfaceStringContent color on inverse surfaces.
inverseSurfaceStringInverse background surface color.
inversePrimaryStringInverse of the primary color, used in dark themes.
surfaceTintStringTint color applied to elevated surfaces.
outlineVariantStringA variant color used for subtle outlines.
scrimStringScrim color used behind modals and dialogs.

Allowed Roots

← Back to Element Reference