Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Expo Router Color

An Expo Router API for accessing platform-specific native colors.

Android
iOS

GitHub

npm

Changelog

The Color API provides access to platform-specific native colors.

See the Expo Router reference for installation and configuration.

Usage

import { Color } from 'expo-router';
import { Text, View, useColorScheme } from 'react-native';

export default function MyComponent() {
  useColorScheme();
  return (
    <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
      <Text style={{ color: Color.ios.label }}>Hello</Text>
    </View>
  );
}

API

import { Color } from 'expo-router';

Constants

Color.Color

Android
iOS

Type: ColorType

Color utility to access platform-specific colors easily.

On Android, it provides access to:

  • System colors, as a type-safe wrapper over PlatformColor. For example, Color.android.background.
  • Attribute colors, as a type-safe wrapper over PlatformColor. For example, Color.android.attr.colorPrimary.
  • Material Design 3 static colors. For example, Color.android.material.primary.
  • Material Design 3 dynamic colors. For example, Color.android.dynamic.primary.

On iOS, it is a type-safe wrapper over PlatformColor, providing access to system colors. For example, Color.ios.label.

Note: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the useColorScheme hook from React Native. This is especially important when using React Compiler, which can memoize components.

Example

import { Color } from 'expo-router';

Color.ios.label; // Access iOS system color
Color.android.background; // Access Android system color
Color.android.attr.colorPrimary; // Access Android attribute color
Color.android.material.primary; // Access Android Material Design 3 static color
Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color

Example

import { Color } from 'expo-router';
import { View, Text, useColorScheme } from 'react-native';

export default function MyComponent() {
  useColorScheme(); // Ensure the app responds to system theme changes
  return (
    <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
      <Text style={{ color: Color.android.dynamic.onPrimary }}>
        Hello, World!
      </Text>
    </View>
  );
}

Interfaces

AndroidBaseColorSDK1

Android
iOS
PropertyTypeDescription
background_darkColorValue

PlatformColor("@android:color/background_dark")

background_lightColorValue

PlatformColor("@android:color/background_light")

blackColorValue

PlatformColor("@android:color/black")

darker_grayColorValue

PlatformColor("@android:color/darker_gray")

tab_indicator_textColorValue

PlatformColor("@android:color/tab_indicator_text")

transparentColorValue

PlatformColor("@android:color/transparent")

whiteColorValue

PlatformColor("@android:color/white")

widget_edittext_darkColorValue

PlatformColor("@android:color/widget_edittext_dark")

AndroidBaseColorSDK14

Android
iOS
PropertyTypeDescription
holo_blue_brightColorValue

PlatformColor("@android:color/holo_blue_bright")

holo_blue_darkColorValue

PlatformColor("@android:color/holo_blue_dark")

holo_blue_lightColorValue

PlatformColor("@android:color/holo_blue_light")

holo_green_darkColorValue

PlatformColor("@android:color/holo_green_dark")

holo_green_lightColorValue

PlatformColor("@android:color/holo_green_light")

holo_orange_darkColorValue

PlatformColor("@android:color/holo_orange_dark")

holo_orange_lightColorValue

PlatformColor("@android:color/holo_orange_light")

holo_purpleColorValue

PlatformColor("@android:color/holo_purple")

holo_red_darkColorValue

PlatformColor("@android:color/holo_red_dark")

holo_red_lightColorValue

PlatformColor("@android:color/holo_red_light")

AndroidBaseColorSDK31

Android
iOS
PropertyTypeDescription
system_accent1_0ColorValue

PlatformColor("@android:color/system_accent1_0")

system_accent1_10ColorValue

PlatformColor("@android:color/system_accent1_10")

system_accent1_100ColorValue

PlatformColor("@android:color/system_accent1_100")

system_accent1_1000ColorValue

PlatformColor("@android:color/system_accent1_1000")

system_accent1_200ColorValue

PlatformColor("@android:color/system_accent1_200")

system_accent1_300ColorValue

PlatformColor("@android:color/system_accent1_300")

system_accent1_400ColorValue

PlatformColor("@android:color/system_accent1_400")

system_accent1_50ColorValue

PlatformColor("@android:color/system_accent1_50")

system_accent1_500ColorValue

PlatformColor("@android:color/system_accent1_500")

system_accent1_600ColorValue

PlatformColor("@android:color/system_accent1_600")

system_accent1_700ColorValue

PlatformColor("@android:color/system_accent1_700")

system_accent1_800ColorValue

PlatformColor("@android:color/system_accent1_800")

system_accent1_900ColorValue

PlatformColor("@android:color/system_accent1_900")

system_accent2_0ColorValue

PlatformColor("@android:color/system_accent2_0")

system_accent2_10ColorValue

PlatformColor("@android:color/system_accent2_10")

system_accent2_100ColorValue

PlatformColor("@android:color/system_accent2_100")

system_accent2_1000ColorValue

PlatformColor("@android:color/system_accent2_1000")

system_accent2_200ColorValue

PlatformColor("@android:color/system_accent2_200")

system_accent2_300ColorValue

PlatformColor("@android:color/system_accent2_300")

system_accent2_400ColorValue

PlatformColor("@android:color/system_accent2_400")

system_accent2_50ColorValue

PlatformColor("@android:color/system_accent2_50")

system_accent2_500ColorValue

PlatformColor("@android:color/system_accent2_500")

system_accent2_600ColorValue

PlatformColor("@android:color/system_accent2_600")

system_accent2_700ColorValue

PlatformColor("@android:color/system_accent2_700")

system_accent2_800ColorValue

PlatformColor("@android:color/system_accent2_800")

system_accent2_900ColorValue

PlatformColor("@android:color/system_accent2_900")

system_accent3_0ColorValue

PlatformColor("@android:color/system_accent3_0")

system_accent3_10ColorValue

PlatformColor("@android:color/system_accent3_10")

system_accent3_100ColorValue

PlatformColor("@android:color/system_accent3_100")

system_accent3_1000ColorValue

PlatformColor("@android:color/system_accent3_1000")

system_accent3_200ColorValue

PlatformColor("@android:color/system_accent3_200")

system_accent3_300ColorValue

PlatformColor("@android:color/system_accent3_300")

system_accent3_400ColorValue

PlatformColor("@android:color/system_accent3_400")

system_accent3_50ColorValue

PlatformColor("@android:color/system_accent3_50")

system_accent3_500ColorValue

PlatformColor("@android:color/system_accent3_500")

system_accent3_600ColorValue

PlatformColor("@android:color/system_accent3_600")

system_accent3_700ColorValue

PlatformColor("@android:color/system_accent3_700")

system_accent3_800ColorValue

PlatformColor("@android:color/system_accent3_800")

system_accent3_900ColorValue

PlatformColor("@android:color/system_accent3_900")

system_neutral1_0ColorValue

PlatformColor("@android:color/system_neutral1_0")

system_neutral1_10ColorValue

PlatformColor("@android:color/system_neutral1_10")

system_neutral1_100ColorValue

PlatformColor("@android:color/system_neutral1_100")

system_neutral1_1000ColorValue

PlatformColor("@android:color/system_neutral1_1000")

system_neutral1_200ColorValue

PlatformColor("@android:color/system_neutral1_200")

system_neutral1_300ColorValue

PlatformColor("@android:color/system_neutral1_300")

system_neutral1_400ColorValue

PlatformColor("@android:color/system_neutral1_400")

system_neutral1_50ColorValue

PlatformColor("@android:color/system_neutral1_50")

system_neutral1_500ColorValue

PlatformColor("@android:color/system_neutral1_500")

system_neutral1_600ColorValue

PlatformColor("@android:color/system_neutral1_600")

system_neutral1_700ColorValue

PlatformColor("@android:color/system_neutral1_700")

system_neutral1_800ColorValue

PlatformColor("@android:color/system_neutral1_800")

system_neutral1_900ColorValue

PlatformColor("@android:color/system_neutral1_900")

system_neutral2_0ColorValue

PlatformColor("@android:color/system_neutral2_0")

system_neutral2_10ColorValue

PlatformColor("@android:color/system_neutral2_10")

system_neutral2_100ColorValue

PlatformColor("@android:color/system_neutral2_100")

system_neutral2_1000ColorValue

PlatformColor("@android:color/system_neutral2_1000")

system_neutral2_200ColorValue

PlatformColor("@android:color/system_neutral2_200")

system_neutral2_300ColorValue

PlatformColor("@android:color/system_neutral2_300")

system_neutral2_400ColorValue

PlatformColor("@android:color/system_neutral2_400")

system_neutral2_50ColorValue

PlatformColor("@android:color/system_neutral2_50")

system_neutral2_500ColorValue

PlatformColor("@android:color/system_neutral2_500")

system_neutral2_600ColorValue

PlatformColor("@android:color/system_neutral2_600")

system_neutral2_700ColorValue

PlatformColor("@android:color/system_neutral2_700")

system_neutral2_800ColorValue

PlatformColor("@android:color/system_neutral2_800")

system_neutral2_900ColorValue

PlatformColor("@android:color/system_neutral2_900")

AndroidBaseColorSDK34

Android
iOS
PropertyTypeDescription
system_background_darkColorValue

PlatformColor("@android:color/system_background_dark")

system_background_lightColorValue

PlatformColor("@android:color/system_background_light")

system_control_activated_darkColorValue

PlatformColor("@android:color/system_control_activated_dark")

system_control_activated_lightColorValue

PlatformColor("@android:color/system_control_activated_light")

system_control_highlight_darkColorValue

PlatformColor("@android:color/system_control_highlight_dark")

system_control_highlight_lightColorValue

PlatformColor("@android:color/system_control_highlight_light")

system_control_normal_darkColorValue

PlatformColor("@android:color/system_control_normal_dark")

system_control_normal_lightColorValue

PlatformColor("@android:color/system_control_normal_light")

system_error_container_darkColorValue

PlatformColor("@android:color/system_error_container_dark")

system_error_container_lightColorValue

PlatformColor("@android:color/system_error_container_light")

system_error_darkColorValue

PlatformColor("@android:color/system_error_dark")

system_error_lightColorValue

PlatformColor("@android:color/system_error_light")

system_on_background_darkColorValue

PlatformColor("@android:color/system_on_background_dark")

system_on_background_lightColorValue

PlatformColor("@android:color/system_on_background_light")

system_on_error_container_darkColorValue

PlatformColor("@android:color/system_on_error_container_dark")

system_on_error_container_lightColorValue

PlatformColor("@android:color/system_on_error_container_light")

system_on_error_darkColorValue

PlatformColor("@android:color/system_on_error_dark")

system_on_error_lightColorValue

PlatformColor("@android:color/system_on_error_light")

system_on_primary_container_darkColorValue

PlatformColor("@android:color/system_on_primary_container_dark")

system_on_primary_container_lightColorValue

PlatformColor("@android:color/system_on_primary_container_light")

system_on_primary_darkColorValue

PlatformColor("@android:color/system_on_primary_dark")

system_on_primary_fixedColorValue

PlatformColor("@android:color/system_on_primary_fixed")

system_on_primary_fixed_variantColorValue

PlatformColor("@android:color/system_on_primary_fixed_variant")

system_on_primary_lightColorValue

PlatformColor("@android:color/system_on_primary_light")

system_on_secondary_container_darkColorValue

PlatformColor("@android:color/system_on_secondary_container_dark")

system_on_secondary_container_lightColorValue

PlatformColor("@android:color/system_on_secondary_container_light")

system_on_secondary_darkColorValue

PlatformColor("@android:color/system_on_secondary_dark")

system_on_secondary_fixedColorValue

PlatformColor("@android:color/system_on_secondary_fixed")

system_on_secondary_fixed_variantColorValue

PlatformColor("@android:color/system_on_secondary_fixed_variant")

system_on_secondary_lightColorValue

PlatformColor("@android:color/system_on_secondary_light")

system_on_surface_darkColorValue

PlatformColor("@android:color/system_on_surface_dark")

system_on_surface_lightColorValue

PlatformColor("@android:color/system_on_surface_light")

system_on_surface_variant_darkColorValue

PlatformColor("@android:color/system_on_surface_variant_dark")

system_on_surface_variant_lightColorValue

PlatformColor("@android:color/system_on_surface_variant_light")

system_on_tertiary_container_darkColorValue

PlatformColor("@android:color/system_on_tertiary_container_dark")

system_on_tertiary_container_lightColorValue

PlatformColor("@android:color/system_on_tertiary_container_light")

system_on_tertiary_darkColorValue

PlatformColor("@android:color/system_on_tertiary_dark")

system_on_tertiary_fixedColorValue

PlatformColor("@android:color/system_on_tertiary_fixed")

system_on_tertiary_fixed_variantColorValue

PlatformColor("@android:color/system_on_tertiary_fixed_variant")

system_on_tertiary_lightColorValue

PlatformColor("@android:color/system_on_tertiary_light")

system_outline_darkColorValue

PlatformColor("@android:color/system_outline_dark")

system_outline_lightColorValue

PlatformColor("@android:color/system_outline_light")

system_outline_variant_darkColorValue

PlatformColor("@android:color/system_outline_variant_dark")

system_outline_variant_lightColorValue

PlatformColor("@android:color/system_outline_variant_light")

system_palette_key_color_neutral_darkColorValue

PlatformColor("@android:color/system_palette_key_color_neutral_dark")

system_palette_key_color_neutral_lightColorValue

PlatformColor("@android:color/system_palette_key_color_neutral_light")

system_palette_key_color_neutral_variant_darkColorValue

PlatformColor("@android:color/system_palette_key_color_neutral_variant_dark")

system_palette_key_color_neutral_variant_lightColorValue

PlatformColor("@android:color/system_palette_key_color_neutral_variant_light")

system_palette_key_color_primary_darkColorValue

PlatformColor("@android:color/system_palette_key_color_primary_dark")

system_palette_key_color_primary_lightColorValue

PlatformColor("@android:color/system_palette_key_color_primary_light")

system_palette_key_color_secondary_darkColorValue

PlatformColor("@android:color/system_palette_key_color_secondary_dark")

system_palette_key_color_secondary_lightColorValue

PlatformColor("@android:color/system_palette_key_color_secondary_light")

system_palette_key_color_tertiary_darkColorValue

PlatformColor("@android:color/system_palette_key_color_tertiary_dark")

system_palette_key_color_tertiary_lightColorValue

PlatformColor("@android:color/system_palette_key_color_tertiary_light")

system_primary_container_darkColorValue

PlatformColor("@android:color/system_primary_container_dark")

system_primary_container_lightColorValue

PlatformColor("@android:color/system_primary_container_light")

system_primary_darkColorValue

PlatformColor("@android:color/system_primary_dark")

system_primary_fixedColorValue

PlatformColor("@android:color/system_primary_fixed")

system_primary_fixed_dimColorValue

PlatformColor("@android:color/system_primary_fixed_dim")

system_primary_lightColorValue

PlatformColor("@android:color/system_primary_light")

system_secondary_container_darkColorValue

PlatformColor("@android:color/system_secondary_container_dark")

system_secondary_container_lightColorValue

PlatformColor("@android:color/system_secondary_container_light")

system_secondary_darkColorValue

PlatformColor("@android:color/system_secondary_dark")

system_secondary_fixedColorValue

PlatformColor("@android:color/system_secondary_fixed")

system_secondary_fixed_dimColorValue

PlatformColor("@android:color/system_secondary_fixed_dim")

system_secondary_lightColorValue

PlatformColor("@android:color/system_secondary_light")

system_surface_bright_darkColorValue

PlatformColor("@android:color/system_surface_bright_dark")

system_surface_bright_lightColorValue

PlatformColor("@android:color/system_surface_bright_light")

system_surface_container_darkColorValue

PlatformColor("@android:color/system_surface_container_dark")

system_surface_container_high_darkColorValue

PlatformColor("@android:color/system_surface_container_high_dark")

system_surface_container_high_lightColorValue

PlatformColor("@android:color/system_surface_container_high_light")

system_surface_container_highest_darkColorValue

PlatformColor("@android:color/system_surface_container_highest_dark")

system_surface_container_highest_lightColorValue

PlatformColor("@android:color/system_surface_container_highest_light")

system_surface_container_lightColorValue

PlatformColor("@android:color/system_surface_container_light")

system_surface_container_low_darkColorValue

PlatformColor("@android:color/system_surface_container_low_dark")

system_surface_container_low_lightColorValue

PlatformColor("@android:color/system_surface_container_low_light")

system_surface_container_lowest_darkColorValue

PlatformColor("@android:color/system_surface_container_lowest_dark")

system_surface_container_lowest_lightColorValue

PlatformColor("@android:color/system_surface_container_lowest_light")

system_surface_darkColorValue

PlatformColor("@android:color/system_surface_dark")

system_surface_dim_darkColorValue

PlatformColor("@android:color/system_surface_dim_dark")

system_surface_dim_lightColorValue

PlatformColor("@android:color/system_surface_dim_light")

system_surface_lightColorValue

PlatformColor("@android:color/system_surface_light")

system_surface_variant_darkColorValue

PlatformColor("@android:color/system_surface_variant_dark")

system_surface_variant_lightColorValue

PlatformColor("@android:color/system_surface_variant_light")

system_tertiary_container_darkColorValue

PlatformColor("@android:color/system_tertiary_container_dark")

system_tertiary_container_lightColorValue

PlatformColor("@android:color/system_tertiary_container_light")

system_tertiary_darkColorValue

PlatformColor("@android:color/system_tertiary_dark")

system_tertiary_fixedColorValue

PlatformColor("@android:color/system_tertiary_fixed")

system_tertiary_fixed_dimColorValue

PlatformColor("@android:color/system_tertiary_fixed_dim")

system_tertiary_lightColorValue

PlatformColor("@android:color/system_tertiary_light")

system_text_hint_inverse_darkColorValue

PlatformColor("@android:color/system_text_hint_inverse_dark")

system_text_hint_inverse_lightColorValue

PlatformColor("@android:color/system_text_hint_inverse_light")

system_text_primary_inverse_darkColorValue

PlatformColor("@android:color/system_text_primary_inverse_dark")

system_text_primary_inverse_disable_only_darkColorValue

PlatformColor("@android:color/system_text_primary_inverse_disable_only_dark")

system_text_primary_inverse_disable_only_lightColorValue

PlatformColor("@android:color/system_text_primary_inverse_disable_only_light")

system_text_primary_inverse_lightColorValue

PlatformColor("@android:color/system_text_primary_inverse_light")

system_text_secondary_and_tertiary_inverse_darkColorValue

PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_dark")

system_text_secondary_and_tertiary_inverse_disabled_darkColorValue

PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_disabled_dark")

system_text_secondary_and_tertiary_inverse_disabled_lightColorValue

PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_disabled_light")

system_text_secondary_and_tertiary_inverse_lightColorValue

PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_light")

AndroidBaseColorSDK35

Android
iOS
PropertyTypeDescription
system_error_0ColorValue

PlatformColor("@android:color/system_error_0")

system_error_10ColorValue

PlatformColor("@android:color/system_error_10")

system_error_100ColorValue

PlatformColor("@android:color/system_error_100")

system_error_1000ColorValue

PlatformColor("@android:color/system_error_1000")

system_error_200ColorValue

PlatformColor("@android:color/system_error_200")

system_error_300ColorValue

PlatformColor("@android:color/system_error_300")

system_error_400ColorValue

PlatformColor("@android:color/system_error_400")

system_error_50ColorValue

PlatformColor("@android:color/system_error_50")

system_error_500ColorValue

PlatformColor("@android:color/system_error_500")

system_error_600ColorValue

PlatformColor("@android:color/system_error_600")

system_error_700ColorValue

PlatformColor("@android:color/system_error_700")

system_error_800ColorValue

PlatformColor("@android:color/system_error_800")

system_error_900ColorValue

PlatformColor("@android:color/system_error_900")

system_on_surface_disabledColorValue

PlatformColor("@android:color/system_on_surface_disabled")

system_outline_disabledColorValue

PlatformColor("@android:color/system_outline_disabled")

system_surface_disabledColorValue

PlatformColor("@android:color/system_surface_disabled")

AndroidColorAttrSDK1

Android
iOS
PropertyTypeDescription
colorBackgroundColorValue

PlatformColor("?attr/colorBackground")

colorForegroundColorValue

PlatformColor("?attr/colorForeground")

colorForegroundInverseColorValue

PlatformColor("?attr/colorForegroundInverse")

AndroidColorAttrSDK14

Android
iOS
PropertyTypeDescription
colorActivatedHighlightColorValue

PlatformColor("?attr/colorActivatedHighlight")

colorFocusedHighlightColorValue

PlatformColor("?attr/colorFocusedHighlight")

colorLongPressedHighlightColorValue

PlatformColor("?attr/colorLongPressedHighlight")

colorMultiSelectHighlightColorValue

PlatformColor("?attr/colorMultiSelectHighlight")

colorPressedHighlightColorValue

PlatformColor("?attr/colorPressedHighlight")

AndroidColorAttrSDK21

Android
iOS
PropertyTypeDescription
colorAccentColorValue

PlatformColor("?attr/colorAccent")

colorButtonNormalColorValue

PlatformColor("?attr/colorButtonNormal")

colorControlActivatedColorValue

PlatformColor("?attr/colorControlActivated")

colorControlHighlightColorValue

PlatformColor("?attr/colorControlHighlight")

colorControlNormalColorValue

PlatformColor("?attr/colorControlNormal")

colorEdgeEffectColorValue

PlatformColor("?attr/colorEdgeEffect")

colorPrimaryColorValue

PlatformColor("?attr/colorPrimary")

colorPrimaryDarkColorValue

PlatformColor("?attr/colorPrimaryDark")

AndroidColorAttrSDK23

Android
iOS
PropertyTypeDescription
colorBackgroundFloatingColorValue

PlatformColor("?attr/colorBackgroundFloating")

AndroidColorAttrSDK25

Android
iOS
PropertyTypeDescription
colorSecondaryColorValue

PlatformColor("?attr/colorSecondary")

AndroidColorAttrSDK26

Android
iOS
PropertyTypeDescription
colorErrorColorValue

PlatformColor("?attr/colorError")

colorModeColorValue

PlatformColor("?attr/colorMode")

AndroidColorAttrSDK5

Android
iOS
PropertyTypeDescription
colorBackgroundCacheHintColorValue

PlatformColor("?attr/colorBackgroundCacheHint")

AndroidDeprecatedColor

Android
iOS
PropertyTypeDescription
primary_text_darkColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/primary_text_dark")

primary_text_dark_nodisableColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/primary_text_dark_nodisable")

primary_text_lightColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/primary_text_light")

primary_text_light_nodisableColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/primary_text_light_nodisable")

secondary_text_darkColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/secondary_text_dark")

secondary_text_dark_nodisableColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/secondary_text_dark_nodisable")

secondary_text_lightColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/secondary_text_light")

secondary_text_light_nodisableColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/secondary_text_light_nodisable")

tertiary_text_darkColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/tertiary_text_dark")

tertiary_text_lightColorValue

Deprecated: Deprecated in Android SDK 28

PlatformColor("@android:color/tertiary_text_light")

AndroidDynamicMaterialColorType

Android
iOS

Android Dynamic Material Colors

You can find out more about color roles in official Material Design 3 documentation.

You can read about the difference between dynamic and static colors in official Material Design 3 documentation.

For a detailed definition of each color role, see material components color documentation.

PropertyTypeDescription
backgroundColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

errorColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Error color role

errorContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Error color role

onBackgroundColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

onErrorColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Error color role

onErrorContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Error color role

onPrimaryColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

onPrimaryContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

onPrimaryFixedColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

onPrimaryFixedVariantColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

onSecondaryColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

onSecondaryContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

onSecondaryFixedColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

onSecondaryFixedVariantColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

onSurfaceColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

onSurfaceInverseColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

Read more about Inverse colors

onSurfaceVariantColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

onTertiaryColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

onTertiaryContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

onTertiaryFixedColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

onTertiaryFixedVariantColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

outlineColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Outline color role

outlineVariantColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Outline color role

primaryColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

primaryContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

primaryFixedColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

primaryFixedDimColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

primaryInverseColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Primary color role

Read more about Inverse colors

secondaryColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

secondaryContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

secondaryFixedColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

secondaryFixedDimColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Secondary color role

surfaceColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceBrightColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceContainerHighColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceContainerHighestColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceContainerLowColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceContainerLowestColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceDimColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

surfaceInverseColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

Read more about Inverse colors

surfaceVariantColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Surface color role

tertiaryColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

tertiaryContainerColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

tertiaryFixedColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

tertiaryFixedDimColorValue

Android Dynamic Material Colors

This color adapts based on the user's wallpaper and theme settings.

Read more about Tertiary color role

AndroidStaticMaterialColorType

Android
iOS

Android Static Material Colors

You can find out more about color roles in official Material Design 3 documentation.

You can read about the difference between dynamic and static colors in official Material Design 3 documentation.

For a detailed definition of each color role, see material components color documentation.

PropertyTypeDescription
backgroundColorValue

Android Static Material Color

errorColorValue

Android Static Material Color

Read more about Error color role

errorContainerColorValue

Android Static Material Color

Read more about Error color role

onBackgroundColorValue

Android Static Material Color

onErrorColorValue

Android Static Material Color

Read more about Error color role

onErrorContainerColorValue

Android Static Material Color

Read more about Error color role

onPrimaryColorValue

Android Static Material Color

Read more about Primary color role

onPrimaryContainerColorValue

Android Static Material Color

Read more about Primary color role

onPrimaryFixedColorValue

Android Static Material Color

Read more about Primary color role

onPrimaryFixedVariantColorValue

Android Static Material Color

Read more about Primary color role

onSecondaryColorValue

Android Static Material Color

Read more about Secondary color role

onSecondaryContainerColorValue

Android Static Material Color

Read more about Secondary color role

onSecondaryFixedColorValue

Android Static Material Color

Read more about Secondary color role

onSecondaryFixedVariantColorValue

Android Static Material Color

Read more about Secondary color role

onSurfaceColorValue

Android Static Material Color

Read more about Surface color role

onSurfaceInverseColorValue

Android Static Material Color

Read more about Surface color role

Read more about Inverse colors

onSurfaceVariantColorValue

Android Static Material Color

Read more about Surface color role

onTertiaryColorValue

Android Static Material Color

Read more about Tertiary color role

onTertiaryContainerColorValue

Android Static Material Color

Read more about Tertiary color role

onTertiaryFixedColorValue

Android Static Material Color

Read more about Tertiary color role

onTertiaryFixedVariantColorValue

Android Static Material Color

Read more about Tertiary color role

outlineColorValue

Android Static Material Color

Read more about Outline color role

outlineVariantColorValue

Android Static Material Color

Read more about Outline color role

primaryColorValue

Android Static Material Color

Read more about Primary color role

primaryContainerColorValue

Android Static Material Color

Read more about Primary color role

primaryFixedColorValue

Android Static Material Color

Read more about Primary color role

primaryFixedDimColorValue

Android Static Material Color

Read more about Primary color role

primaryInverseColorValue

Android Static Material Color

Read more about Primary color role

Read more about Inverse colors

secondaryColorValue

Android Static Material Color

Read more about Secondary color role

secondaryContainerColorValue

Android Static Material Color

Read more about Secondary color role

secondaryFixedColorValue

Android Static Material Color

Read more about Secondary color role

secondaryFixedDimColorValue

Android Static Material Color

Read more about Secondary color role

surfaceColorValue

Android Static Material Color

Read more about Surface color role

surfaceBrightColorValue

Android Static Material Color

Read more about Surface color role

surfaceContainerColorValue

Android Static Material Color

Read more about Surface color role

surfaceContainerHighColorValue

Android Static Material Color

Read more about Surface color role

surfaceContainerHighestColorValue

Android Static Material Color

Read more about Surface color role

surfaceContainerLowColorValue

Android Static Material Color

Read more about Surface color role

surfaceContainerLowestColorValue

Android Static Material Color

Read more about Surface color role

surfaceDimColorValue

Android Static Material Color

Read more about Surface color role

surfaceInverseColorValue

Android Static Material Color

Read more about Surface color role

Read more about Inverse colors

surfaceVariantColorValue

Android Static Material Color

Read more about Surface color role

tertiaryColorValue

Android Static Material Color

Read more about Tertiary color role

tertiaryContainerColorValue

Android Static Material Color

Read more about Tertiary color role

tertiaryFixedColorValue

Android Static Material Color

Read more about Tertiary color role

tertiaryFixedDimColorValue

Android Static Material Color

Read more about Tertiary color role

ColorType

Android
iOS
PropertyTypeDescription
androidAndroidBaseColorSDK1 & AndroidBaseColorSDK14 & AndroidBaseColorSDK31 & AndroidBaseColorSDK34 & AndroidBaseColorSDK35 & AndroidDeprecatedColor & undefined & { attr: AndroidBaseColorAttr, dynamic: AndroidDynamicMaterialColor, material: AndroidMaterialColor }
-
iosIOSBaseColor & undefined
-

IOSBaseColor

Android
iOS
PropertyTypeDescription
darkTextColorValue

PlatformColor("darkText")

labelColorValue

PlatformColor("label")

lightTextColorValue

PlatformColor("lightText")

linkColorValue

PlatformColor("link")

opaqueSeparatorColorValue

PlatformColor("opaqueSeparator")

placeholderTextColorValue

PlatformColor("placeholderText")

quaternaryLabelColorValue

PlatformColor("quaternaryLabel")

quaternarySystemFillColorValue

PlatformColor("quaternarySystemFill")

secondaryLabelColorValue

PlatformColor("secondaryLabel")

secondarySystemBackgroundColorValue

PlatformColor("secondarySystemBackground")

secondarySystemFillColorValue

PlatformColor("secondarySystemFill")

secondarySystemGroupedBackgroundColorValue

PlatformColor("secondarySystemGroupedBackground")

separatorColorValue

PlatformColor("separator")

systemBackgroundColorValue

PlatformColor("systemBackground")

systemBlueColorValue

PlatformColor("systemBlue")

systemBrownColorValue

PlatformColor("systemBrown")

systemCyanColorValue

PlatformColor("systemCyan")

systemFillColorValue

PlatformColor("systemFill")

systemGrayColorValue

PlatformColor("systemGray")

systemGray2ColorValue

PlatformColor("systemGray2")

systemGray3ColorValue

PlatformColor("systemGray3")

systemGray4ColorValue

PlatformColor("systemGray4")

systemGray5ColorValue

PlatformColor("systemGray5")

systemGray6ColorValue

PlatformColor("systemGray6")

systemGreenColorValue

PlatformColor("systemGreen")

systemGroupedBackgroundColorValue

PlatformColor("systemGroupedBackground")

systemIndigoColorValue

PlatformColor("systemIndigo")

systemMintColorValue

PlatformColor("systemMint")

systemOrangeColorValue

PlatformColor("systemOrange")

systemPinkColorValue

PlatformColor("systemPink")

systemPurpleColorValue

PlatformColor("systemPurple")

systemRedColorValue

PlatformColor("systemRed")

systemTealColorValue

PlatformColor("systemTeal")

systemYellowColorValue

PlatformColor("systemYellow")

tertiaryLabelColorValue

PlatformColor("tertiaryLabel")

tertiarySystemBackgroundColorValue

PlatformColor("tertiarySystemBackground")

tertiarySystemFillColorValue

PlatformColor("tertiarySystemFill")

tertiarySystemGroupedBackgroundColorValue

PlatformColor("tertiarySystemGroupedBackground")

Types

AndroidBaseColor

Android
iOS

Type: AndroidBaseColorSDK1 AndroidBaseColorSDK14 AndroidBaseColorSDK31 AndroidBaseColorSDK34 AndroidBaseColorSDK35 AndroidDeprecatedColor extended by:

PropertyTypeDescription

AndroidBaseColorAttr

Android
iOS

Type: AndroidColorAttrSDK1 AndroidColorAttrSDK5 AndroidColorAttrSDK14 AndroidColorAttrSDK21 AndroidColorAttrSDK23 AndroidColorAttrSDK25 AndroidColorAttrSDK26 extended by:

PropertyTypeDescription

AndroidDynamicMaterialColor

Android
iOS

Type: AndroidDynamicMaterialColorType extended by:

PropertyTypeDescription

AndroidMaterialColor

Android
iOS

Type: AndroidStaticMaterialColorType extended by:

PropertyTypeDescription