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.

Properties

• error(ColorValue | None) –

  The color to use for input validation errors, e.g. for TextField.error_text.

• error_container(ColorValue | None) –

  A color used for error elements needing less emphasis than error.

• inverse_primary(ColorValue | None) –

  An accent color used for displaying a highlight color on inverse_surface

• inverse_surface(ColorValue | None) –

  A surface color used for displaying the reverse of what’s seen in the surrounding

• on_error(ColorValue | None) –

  A color that's clearly legible when drawn on error.

• on_error_container(ColorValue | None) –

  A color that's clearly legible when drawn on error_container.

• on_inverse_surface(ColorValue | None) –

  A color that's clearly legible when drawn on inverse_surface.

• on_primary(ColorValue | None) –

  A color that's clearly legible when drawn on primary.

• on_primary_container(ColorValue | None) –

  A color that's clearly legible when drawn on primary_container.

• on_primary_fixed(ColorValue | None) –

  A color that is used for text and icons that exist on top of elements having

• on_primary_fixed_variant(ColorValue | None) –

  A color that provides a lower-emphasis option for text and icons than

• on_secondary(ColorValue | None) –

  A color that's clearly legible when drawn on secondary.

• on_secondary_container(ColorValue | None) –

  A color that's clearly legible when drawn on secondary_container.

• on_secondary_fixed(ColorValue | None) –

  A color that is used for text and icons that exist on top of elements having

• on_secondary_fixed_variant(ColorValue | None) –

  A color that provides a lower-emphasis option for text and icons than

• on_surface(ColorValue | None) –

  A color that's clearly legible when drawn on surface.

• on_surface_variant(ColorValue | None) –

  A color that's clearly legible when drawn on surface_variant.

• on_tertiary(ColorValue | None) –

  A color that's clearly legible when drawn on tertiary.

• on_tertiary_container(ColorValue | None) –

  A color that's clearly legible when drawn on tertiary_container.

• on_tertiary_fixed(ColorValue | None) –

  A color that is used for text and icons that exist on top of elements having

• on_tertiary_fixed_variant(ColorValue | None) –

  A color that provides a lower-emphasis option for text and icons than

• outline(ColorValue | None) –

  A utility color that creates boundaries and emphasis to improve usability.

• outline_variant(ColorValue | None) –

  A utility color that creates boundaries for decorative elements when a 3:1 contrast

• primary(ColorValue | None) –

  The color displayed most frequently across your app's screens and components.

• primary_container(ColorValue | None) –

  A color used for elements needing less emphasis than primary.

• primary_fixed(ColorValue | None) –

  A substitute for primary_container that's the same color for the dark and light

• primary_fixed_dim(ColorValue | None) –

  A color used for elements needing more emphasis than primary_fixed.

• scrim(ColorValue | None) –

  A color use to paint the scrim around of modal components.

• secondary(ColorValue | None) –

  An accent color used for less prominent components in the UI, such as filter chips,

• secondary_container(ColorValue | None) –

  A color used for elements needing less emphasis than secondary.

• secondary_fixed(ColorValue | None) –

  A substitute for secondary_container that's the same color for the dark and light

• secondary_fixed_dim(ColorValue | None) –

  A color used for elements needing more emphasis than secondary_fixed.

• shadow(ColorValue | None) –

  A color use to paint the drop shadows of elevated components.

• surface(ColorValue | None) –

  The background color for widgets like Card.

• surface_bright(ColorValue | None) –

  A color that's always the lightest in the dark or light theme.

• surface_container(ColorValue | None) –

  A recommended color role for a distinct area within the surface.

• surface_container_high(ColorValue | None) –

  A surface container color with a darker tone.

• surface_container_highest(ColorValue | None) –

  A surface container color with the darkest tone. It is used to create the most

• surface_container_low(ColorValue | None) –

  A surface container color with a lighter tone that creates less emphasis than

• surface_container_lowest(ColorValue | None) –

  A surface container color with the lightest tone and the least emphasis relative to

• surface_dim(ColorValue | None) –

  A color that's always darkest in the dark or light theme.

• surface_tint(ColorValue | None) –

  A color used as an overlay on a surface color to indicate a component's elevation.

• tertiary(ColorValue | None) –

  A color used as a contrasting accent that can balance primary and secondary

• tertiary_container(ColorValue | None) –

  A color used for elements needing less emphasis than tertiary.

• tertiary_fixed(ColorValue | None) –

  A substitute for tertiary_container that's the same color for dark and light

• tertiary_fixed_dim(ColorValue | None) –

  A color used for elements needing more emphasis than tertiary_fixed.

Properties

error class-attribute instance-attribute

error: ColorValue | None = None

The color to use for input validation errors, e.g. for TextField.error_text.

error_container class-attribute instance-attribute

error_container: ColorValue | None = None

A color used for error elements needing less emphasis than error.

inverse_primary class-attribute instance-attribute

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 class-attribute instance-attribute

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_error class-attribute instance-attribute

on_error: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on error.

on_error_container class-attribute instance-attribute

on_error_container: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on error_container.

on_inverse_surface class-attribute instance-attribute

on_inverse_surface: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on inverse_surface.

on_primary class-attribute instance-attribute

on_primary: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on primary.

on_primary_container class-attribute instance-attribute

on_primary_container: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on primary_container.

on_primary_fixed class-attribute instance-attribute

on_primary_fixed: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that is used for text and icons that exist on top of elements having primary_fixed color.

on_primary_fixed_variant class-attribute instance-attribute

on_primary_fixed_variant: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that provides a lower-emphasis option for text and icons than on_primary_fixed.

on_secondary class-attribute instance-attribute

on_secondary: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on secondary.

on_secondary_container class-attribute instance-attribute

on_secondary_container: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on secondary_container.

on_secondary_fixed class-attribute instance-attribute

on_secondary_fixed: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that is used for text and icons that exist on top of elements having secondary_fixed color.

on_secondary_fixed_variant class-attribute instance-attribute

on_secondary_fixed_variant: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that provides a lower-emphasis option for text and icons than on_secondary_fixed.

on_surface class-attribute instance-attribute

on_surface: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on surface.

on_surface_variant class-attribute instance-attribute

on_surface_variant: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on surface_variant.

on_tertiary class-attribute instance-attribute

on_tertiary: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on tertiary.

on_tertiary_container class-attribute instance-attribute

on_tertiary_container: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that's clearly legible when drawn on tertiary_container.

on_tertiary_fixed class-attribute instance-attribute

on_tertiary_fixed: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that is used for text and icons that exist on top of elements having tertiary_fixed color.

on_tertiary_fixed_variant class-attribute instance-attribute

on_tertiary_fixed_variant: ColorValue | None = field(
    default=None, metadata={"event": False}
)

A color that provides a lower-emphasis option for text and icons than on_tertiary_fixed.

outline class-attribute instance-attribute

outline: ColorValue | None = None

A utility color that creates boundaries and emphasis to improve usability.

outline_variant class-attribute instance-attribute

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 class-attribute instance-attribute

primary: ColorValue | None = None

The color displayed most frequently across your app's screens and components.

primary_container class-attribute instance-attribute

primary_container: ColorValue | None = None

A color used for elements needing less emphasis than primary.

primary_fixed class-attribute instance-attribute

primary_fixed: ColorValue | None = None

A substitute for primary_container that's the same color for the dark and light themes.

primary_fixed_dim class-attribute instance-attribute

primary_fixed_dim: ColorValue | None = None

A color used for elements needing more emphasis than primary_fixed.

scrim class-attribute instance-attribute

scrim: ColorValue | None = None

A color use to paint the scrim around of modal components.

secondary class-attribute instance-attribute

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 class-attribute instance-attribute

secondary_container: ColorValue | None = None

A color used for elements needing less emphasis than secondary.

secondary_fixed class-attribute instance-attribute

secondary_fixed: ColorValue | None = None

A substitute for secondary_container that's the same color for the dark and light themes.

secondary_fixed_dim class-attribute instance-attribute

secondary_fixed_dim: ColorValue | None = None

A color used for elements needing more emphasis than secondary_fixed.

shadow class-attribute instance-attribute

shadow: ColorValue | None = None

A color use to paint the drop shadows of elevated components.

surface class-attribute instance-attribute

surface: ColorValue | None = None

The background color for widgets like Card.

surface_bright class-attribute instance-attribute

surface_bright: ColorValue | None = None

A color that's always the lightest in the dark or light theme.

surface_container class-attribute instance-attribute

surface_container: ColorValue | None = None

A recommended color role for a distinct area within the surface.

surface_container_high class-attribute instance-attribute

surface_container_high: ColorValue | None = None

A surface container color with a darker tone.

surface_container_highest class-attribute instance-attribute

surface_container_highest: ColorValue | None = None

A surface container color with the darkest tone. It is used to create the most emphasis against the surface.

surface_container_low class-attribute instance-attribute

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 class-attribute instance-attribute

surface_container_lowest: ColorValue | None = None

A surface container color with the lightest tone and the least emphasis relative to the surface.

surface_dim class-attribute instance-attribute

surface_dim: ColorValue | None = None

A color that's always darkest in the dark or light theme.

surface_tint class-attribute instance-attribute

surface_tint: ColorValue | None = None

A color used as an overlay on a surface color to indicate a component's elevation.

tertiary class-attribute instance-attribute

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 class-attribute instance-attribute

tertiary_container: ColorValue | None = None

A color used for elements needing less emphasis than tertiary.

tertiary_fixed class-attribute instance-attribute

tertiary_fixed: ColorValue | None = None

A substitute for tertiary_container that's the same color for dark and light themes.

tertiary_fixed_dim class-attribute instance-attribute

tertiary_fixed_dim: ColorValue | None = None

A color used for elements needing more emphasis than tertiary_fixed.