Watch Face Format version <button value="5" default="">Version 5</button> <button value="4">Version 4</button> <button value="3">Version 3</button> <button value="2">Version 2</button> <button value="1">Version 1</button>

*** ** * ** ***

A `ColorConfiguration` gives the user an option to change the color of elements
of the watch face through the watch face editor.

When a `ColorConfiguration` is defined, any color-based attribute of another
element, such as `tintColor`, can refer to a color from the configuration
using an expression that uses the ID values of the `ColorConfiguration` and
a `ColorOption`. For a complete demonstration, see the [example](https://developer.android.com/reference/wear-os/wff/user-configuration/color-configuration#example).

Introduced in Wear OS 4.

## Syntax

```xml
<ColorConfiguration id="string" displayName="string" icon="string"
                    screenReaderText="string" defaultValue="string"
                    highlight="image resource">
  <ColorOption id="string" displayName="string" screenReaderText="string"
               colors="argb-color-list" />
  ...
</ColorConfiguration>
```

## Example

Suppose that the following color configuration, with an ID value of
`themeColor`, is defined:

    <ColorConfiguration id="themeColor" defaultValue="0"
                        displayName="color_selector_display_name">
        <ColorOption id="0" displayName="color_theme_0" colors="#ff000000 #ff888888 #ffffffff"/>
        <ColorOption id="1" displayName="color_theme_1" colors="#ffff0000 #ffff8800 #ffffff00"/>
        <ColorOption id="2" displayName="color_theme_2" colors="#ff00ff00 #ff00ff88 #ff00ffff"/>
        <ColorOption id="3" displayName="color_theme_3" colors="#ff0000ff #ff8800ff #ffff00ff"/>
    </ColorConfiguration>

This configuration represents a choice of four palettes, each containing
three colors.

If the `colors` attribute contains only a single value, reference the theme
as follows, for example, to set a `tintColor`:

    <PartText ... tintColor="[CONFIGURATION.themeColor]">

If the `colors` attribute contains a palette of more than one value,
reference the index as shown in the following example. Specifically this
example shows selecting the second color in the chosen `ColorOption`:

    <PartText ... tintColor="[CONFIGURATION.themeColor.1]">

## Attributes

The `ColorConfiguration` element has the following attributes:

### Required attributes

The following attributes are required:

`id`
:   A unique identifier for the configuration value.

`displayName`
:   A resource ID corresponding to the text that is displayed in the watch
    face editor.

`defaultValue`
:   The default configuration value used if the user does not explicitly change
    the configuration in the watch face editor. This should be set to the `id` of
    one of the inner `ColorOption` elements.

### Optional attributes

The following attributes are optional:

`icon`
:   A resource ID corresponding to the drawable resource which is shown in
    the watch face editor. This should have a maximum size of 400x400 px.

`screenReaderText`
:   A resource ID corresponding to the text which is used if the user has
    TalkBack enabled.

`highlight`

:   An overlay image that helps to highlight the area of change for this
    configuration option on the watch face, which may be shown by editors that
    support it.

:   The image should have a transparent background, and be tintable. The aspect
    ratio of the image should match that of the watch face, and the image should
    also show the boundary of the area affected by the configuration change.

## Inner elements

The `ColorConfiguration` element can contain between 1 and 100 inner
`ColorOption` elements.

### ColorOption Attributes

The `ColorOption` element must contain the following attributes:

`id`
:   A unique identifier for the option value.

`displayName`
:   A resource ID corresponding to the text that is displayed in the watch
    face editor.

The `ColorOption` element must contain one of the following attributes:

`colors`
:   A space separated list of [ARGB color values](https://developer.android.com/reference/android/graphics/Color#color-ints).

The `ColorOption` element can optionally contain the following
attributes:

`icon`
:   Deprecated. A resource ID corresponding to the drawable resource which is shown in
    the watch face editor. This does not have any effect.

`screenReaderText`
:   A resource ID corresponding to the text which is used if the user has
    TalkBack enabled.

## Recommended for you

- Note: link text is displayed when JavaScript is off
- [ColorConfiguration](https://developer.android.com/training/wearables/wff/v2/user-configuration/color-configuration)
- [Flavor](https://developer.android.com/training/wearables/wff/v2/user-configuration/flavor)
- [Flavor](https://developer.android.com/training/wearables/wff/user-configuration/flavor)