Color Theming

The Material Design color system can be used to create a color scheme that reflects your brand or style.

The Material Design color system uses an organized approach to applying color to your UI. In this system, two theme colors are selected to express different parts of a UI: a primary color and a secondary color. Material components use these theme colors and their variations to style their individual backgrounds, text, and more.

Design & API Documentation

Applying color to UI 

Color is applied to UI elements and components inconsistent and meaningful ways.

CONTENTS

Usage

Top and bottom app bars

Backdrop

Sheets and surfaces

Buttons, chips and selection controls

Typography and iconography

Usage 

These guidelines describe a variety of UI components and elements where the color application is important.

Principles

Consistent

Color should be applied throughout a UI consistently and be compatible with the brand it represents.

Distinct

Color should create a distinction between elements, with sufficient contrast between them.

Intentional

Color should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees of hierarchy.

Usage

All Material Design components use a Widget.MaterialComponents style, and these styles reference color attributes from the Material Design theme (Theme.MaterialComponents). So, it is easy to re-color attributes across your app by simply modifying the color attributes in your theme. These attributes are:

    colorPrimary, colorPrimaryDark

• colorSecondary

By changing andcolorPrimarycolorSecondary (along with their dark and light variants), you can easily change the style of all the Material components to which your theme is applied.

Furthermore, if you want to change the mapping for a component completely, e.g. you want to change MaterialButton so that it uses colorPrimary for its background tint rather than,colorSecondary all you would have to do is define your own button style that extends from a Material Design style and set the mapping yourself:

<style name="Widget.MyApp.MyButton" parent="Widget.MaterialComponents.Button">

  <item name="backgroundTint">?attr/colorPrimary</item>

</style>

Then, you can apply this style to individual buttons directly, or apply it to all of your buttons by setting the materialButtonStyle attribute in your theme:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">

  ...

  <item name="materialButtonStyle">@style/Widget.MyApp.MyButton</item>

  ...

</style>

Coming Soon

We will be updating our color theming to make component colors much more easily themeable app-wide.

In a future update, our themes and components will be updated to reference a new set of color theming attributes. Then, all you need to do is update the hexadecimal color values for these attributes and you can:

• adjust your component colors
• switch between dark and light themes
• ensure accessible color combinations across your app

The new color theme will be based around a primary and secondary color. To select primary and secondary colors, and generate variations of each, use, or 2014 Material Design palettes.

The full list of new attribute names will be as follows:

Attribute name	Description
colorPrimary	Displayed most frequently across your app.
colorPrimaryVariant	A tonal variation of primary color.
colorSecondary	Accents select parts of your UI. If not provided, use primary.
colorSecondaryVariant	A tonal variation of secondary color.
colorBackground	The underlying color of an app’s content. Typically the background color of scrollable content.
colorError	The color used to indicate error status.
colorSurface	The color of surfaces such as cards, sheets, menus.
colorOnPrimary	A color that passes accessibility guidelines for text/iconography when drawn on top of the primary.
colorOnSecondary	A color that passes accessibility guidelines for text/iconography when drawn on top of secondary.
colorOnBackground	A color that passes accessibility guidelines for text/iconography when drawn on top of the background.
colorOnError	A color that passes accessibility guidelines for text/iconography when drawn on top of error.
colorOnSurface	A color that passes accessibility guidelines for text/iconography when drawn on top of a surface.

Surface, background, and error colors typically do not represent the brand. Surface colors typically map to components such as cards, sheets, and menus. The background color is typically found behind the scrollable content. Error color is the indication of errors within components such as text fields.

For,colorOnPrimarycolorOnSecondary, etc., these colors must pass contrast accessibility guidelines when drawn on top of their corresponding color attributes. Material components will then use these attributes such that the color combinations remain accessible in any component state.

Material design is an adaptable system—backed by open-source code—guiding you in the principles and best practices of contemporary UI. The material helps teams streamline the designer-developer collaboration, reduce complexity, and enable fidelity through reusable components, patterns, and code libraries. All while adapting easily to your brand, platform, and users’ needs.

• Github 
• Twitter 
• YouTube