KIRN TECH OCT 14 · 2 MIN READ

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:
Theme {
(attribute)     (value)
“primaryColor“ : “orange“
}
Applying color by it's attribute in code:
Container(
   background: Theme.primaryColor,
);
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.

Don't miss the latest news. Subscribe to our newsletter!
© 2021 All Right Reserved. KiRN Tech.
sales@kirn.tech
Quick and Smooth Mobile App Launch
For Your Startup.
Peremohy Ave. 26, Kyiv, Ukraine, 04116