ColorScheme
ColorScheme
#
A set of more than 40 colors based on the Material spec that can be used to configure the color properties of most components. Read more about color schemes in here.
background
#
background: ColorValue | None = None
A color that typically appears behind scrollable content.
error
#
error: ColorValue | None = None
The color to use for input validation errors, e.g. for TextField.error_text
.
error_container
#
error_container: ColorValue | None = None
A color used for error elements needing less emphasis than error
.
inverse_primary
#
inverse_primary: ColorValue | None = None
An accent color used for displaying a highlight color on inverse_surface
backgrounds, like button text in a SnackBar
.
inverse_surface
#
inverse_surface: ColorValue | None = None
A surface color used for displaying the reverse of what’s seen in the surrounding
UI, for example in a SnackBar
to bring attention to an alert.
on_background
#
on_background: ColorValue | None = None
A color that's clearly legible when drawn on background
.
on_error_container
#
on_error_container: ColorValue | None = None
A color that's clearly legible when drawn on error_container
.
on_inverse_surface
#
on_inverse_surface: ColorValue | None = None
A color that's clearly legible when drawn on inverse_surface
.
on_primary
#
on_primary: ColorValue | None = None
A color that's clearly legible when drawn on primary
.
on_primary_container
#
on_primary_container: ColorValue | None = None
A color that's clearly legible when drawn on primary_container
.
on_primary_fixed
#
on_primary_fixed: ColorValue | None = None
A color that is used for text and icons that exist on top of elements having
primary_fixed
color.
on_primary_fixed_variant
#
on_primary_fixed_variant: ColorValue | None = None
A color that provides a lower-emphasis option for text and icons than
on_primary_fixed
.
on_secondary
#
on_secondary: ColorValue | None = None
A color that's clearly legible when drawn on secondary
.
on_secondary_container
#
on_secondary_container: ColorValue | None = None
A color that's clearly legible when drawn on secondary_container
.
on_secondary_fixed
#
on_secondary_fixed: ColorValue | None = None
A color that is used for text and icons that exist on top of elements having
secondary_fixed
color.
on_secondary_fixed_variant
#
on_secondary_fixed_variant: ColorValue | None = None
A color that provides a lower-emphasis option for text and icons than
on_secondary_fixed
.
on_surface
#
on_surface: ColorValue | None = None
A color that's clearly legible when drawn on surface
.
on_surface_variant
#
on_surface_variant: ColorValue | None = None
A color that's clearly legible when drawn on surface_variant
.
on_tertiary
#
on_tertiary: ColorValue | None = None
A color that's clearly legible when drawn on tertiary
.
on_tertiary_container
#
on_tertiary_container: ColorValue | None = None
A color that's clearly legible when drawn on tertiary_container
.
on_tertiary_fixed
#
on_tertiary_fixed: ColorValue | None = None
A color that is used for text and icons that exist on top of elements having
tertiary_fixed
color.
on_tertiary_fixed_variant
#
on_tertiary_fixed_variant: ColorValue | None = None
A color that provides a lower-emphasis option for text and icons than
on_tertiary_fixed
.
outline
#
outline: ColorValue | None = None
A utility color that creates boundaries and emphasis to improve usability.
outline_variant
#
outline_variant: ColorValue | None = None
A utility color that creates boundaries for decorative elements when a 3:1 contrast isn’t required, such as for dividers or decorative elements.
primary
#
primary: ColorValue | None = None
The color displayed most frequently across your app’s screens and components.
primary_container
#
primary_container: ColorValue | None = None
A color used for elements needing less emphasis than primary
.
primary_fixed
#
primary_fixed: ColorValue | None = None
A substitute for primary_container
that's the same color for the dark and light
themes.
primary_fixed_dim
#
primary_fixed_dim: ColorValue | None = None
A color used for elements needing more emphasis than primary_fixed
.
secondary
#
secondary: ColorValue | None = None
An accent color used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.
secondary_container
#
secondary_container: ColorValue | None = None
A color used for elements needing less emphasis than secondary
.
secondary_fixed
#
secondary_fixed: ColorValue | None = None
A substitute for secondary_container
that's the same color for the dark and light
themes.
secondary_fixed_dim
#
secondary_fixed_dim: ColorValue | None = None
A color used for elements needing more emphasis than secondary_fixed
.
shadow
#
shadow: ColorValue | None = None
A color use to paint the drop shadows of elevated components.
surface_bright
#
surface_bright: ColorValue | None = None
A color that's always the lightest in the dark or light theme.
surface_container
#
surface_container: ColorValue | None = None
A recommended color role for a distinct area within the surface.
surface_container_high
#
surface_container_high: ColorValue | None = None
A surface container color with a darker tone.
surface_container_low
#
surface_container_low: ColorValue | None = None
A surface container color with a lighter tone that creates less emphasis than
surface_container
but more emphasis than surface_container_lowest
.
surface_container_lowest
#
surface_container_lowest: ColorValue | None = None
A surface container color with the lightest tone and the least emphasis relative to the surface.
surface_dim
#
surface_dim: ColorValue | None = None
A color that's always darkest in the dark or light theme.
surface_tint
#
surface_tint: ColorValue | None = None
A color used as an overlay on a surface color to indicate a component's elevation.
surface_variant
#
surface_variant: ColorValue | None = None
A color variant of surface
that can be used for differentiation against a
component using surface
.
tertiary
#
tertiary: ColorValue | None = None
A color used as a contrasting accent that can balance primary
and secondary
colors or bring heightened attention to an element, such as an input field.
tertiary_container
#
tertiary_container: ColorValue | None = None
A color used for elements needing less emphasis than tertiary
.
tertiary_fixed
#
tertiary_fixed: ColorValue | None = None
A substitute for tertiary_container
that's the same color for dark and light
themes.
tertiary_fixed_dim
#
tertiary_fixed_dim: ColorValue | None = None
A color used for elements needing more emphasis than tertiary_fixed
.