Flutter Custom App Theme.
Attribute Color Naming.

1. Theming concept.

Theme — is a set of attributes (semantically named pointers) to resource value and is referenced by UI components.

Mapping "attribute" to "value" in Theme:

Usage of attributes allows decoupling Design System attribute from its specific value, allowing to provide different values, by changing themes.

Because by abstracting the resource with a theme, we can set different concrete values (such as colorPrimary=blue) with different themes, while keeping the code unmodifiable.

2. Attribute Color Naming Rule.

Attribute Color Name is component-based, and is composed of parameters that color value depends on:

Component + Type + Style + State.

Let's name the following button:

Combination of

Component = Button,

Type = Action,

Style = Primary

and State = Enabled,

gives theme attribute color name: buttonActionPrimaryEnabledColor.

Consider the next Action Buttons:

and their corresponding attributes:

If on a Screen there is the same color value used in multiple components as in the example below, then still, following the Color Naming Rule, we'll have 4 different theme attributes, as naming is component-based:

For instance,

1. navigationIconColor = ColorPalette.black700
2. textScreenTitlePrimaryColor. = ColorPalette.black700
3. textHeaderPrimaryColor = ColorPalette.black700
4. textLabelSmallColor = ColorPalette.black700

This approach gives the flexibility to change color by component.

If it's impossible to distinguish attributes by this Naming Rule then another component style should be added.