The 6 common color attributes are -
- colorPrimary
- colorPrimaryVariant
- colorOnPrimary
- colorSecondary
- colorSecondaryVariant
- colorOnSecondary
colorPrimary
The primary brand color of your app displayed most frequently across your app’s screens and components
Default Value -> #6200EE
colorPrimaryVariant
A lighter/darker variant of your primary brand color used sparingly in theming
Default Value -> #3700B3
colorOnPrimary
The color used for elements displayed on top of your primary colors (eg. Text and icons, often white or semi-transparent black depending on accessibility)
Default Value -> #FFFFFF
colorSecondary
The secondary brand color of your app, used mostly as an accent for certain widgets that need to stand out
Default Value -> #03DAC6
colorSecondaryVariant
A lighter/darker variant of your secondary brand color used sparingly in theming
Default Value -> #018786
colorOnSecondary
The color used for elements displayed on top of your secondary colors
Default Value -> #000000
By changing these six color attributes, you can easily change the style of all the Material components to which your theme is applied.
There are some other branding colors in the Material Design Color theming system which define your UI and ensures accessible color combinations.
These additional color attributes are as follows -
android:colorBackground
The background color appears behind scrollable content.
Default Value -> #FFFFFF
colorOnBackground
The color used for elements displayed on top of your background color
Default Value -> #000000
colorSurface
The color used for surfaces (i.e. Material “sheets”) Surface colors affect the surfaces of components, such as cards, sheets, and menus.
Default Value -> #FFFFFF
colorOnSurface
The color used for elements displayed on top of your surface color
Default Value -> #000000
colorError
Error color indicates errors states, for components such as text fields (often a shade of red)
Default Value -> #B00020
colorOnError
The color used for elements displayed on top of your error color
Default Value -> #FFFFFF
The end
If you liked this make sure to follow me!