What are Color Themes?

Color Themes define which colors are used by an application. Therefore several colors are defined. To see the official guidelines, click here.

Primary Color

The primary color is the color that is used for an application's AppBar. Although "primary" indicates that it is used many times, that's not true. Actually the primary color (and its variants) are mainly used by the AppBar and SystemBar.

Secondary Color

The secondary color is used for certain accents in the design. Buttons for example usually use the secondary color. A color theme usually provides different variants of the secondary color to allow further accents in design.

Background Color

The background color is the color of the applications background. It must not be mixed up with the surface color

Surface Color

Material Design applications persist of cards which are displayed on top of a background. So these cards need a background color too. That's where the surface color has it's place.

Error Color

Sometimes it is necessary to notify about something being wrong. A simple card wouldn't be meaningful enough. So the error color is used as an emphasis for such a need.

On Colors

The colors above are only for background of cards. Usually you want to have text written on those cards. So for every color there is an "onColor". On colors must have a decent contrast so that the text is readable. For further information about visual contrast see the web content accessibility guidelines. The guideline for contrast can be found at "WCAG 2.0: 1.4.3 - Contrast".

How are Color Themes used in the project?

We have build a MDColorTheme class. Objects of that class provide all of the colors above so that widgets can grabb their color from a theme. As a class variable we saved a theme as the currently used theme. Also we provided default values that result in a well thought color scheme.

The official colors weren't enough for our use case so we had to implement two new ones.

Disabled Color

Sometimes buttons get disabled because their functions doesn't make sense in a certain context. To make sure the user sees that a button is not usable at the time, it should change it's color. That's what the disabled color is for. ...

Divider Color

In lists the list items should be visibly separated from each other. These separators must have a color.

Code snippets

Displaying the current theme

Execute this code to see all colors of the currently set color theme:

MDColorTheme currentTheme showColors.

The order in which the colors are displayed is:

1. The light variant of the primary color
2. The primary color
3. The dark variant of the primary color
4. The light variant of the secondary color
5. The secondary color
6. The dark variant of the secondary color
7. The error color
8. The disabled color
9. The divider color
10. The surface color
11. The background color

Changing the current theme

You can modify the current theme in the MDThemeConfigurationWindow (open it via MDThemeConfigurationWindow new openInWorld). Or change it directly from code:

Changing the current theme to a custom one

To change the current theme we first have to instantiate a new theme. Then its values can be changed for our liking. Finally the current theme is set to be the one we just made.

theme := MDColorTheme new.

theme primaryColor: (Color fromString: '009688').
theme secondaryColor: (Color fromString: 'ffc107').
theme errorColor: (Color fromString: 'ad1457').

MDColorTheme currentTheme: theme

Changing the current theme back to the default

A theme gets the default values when it is instantiated. Therefore we just need to instantiate a new one and set the current theme to be that instantiated theme to change the current theme back to the default.

MDColorTheme currentTheme: MDColorTheme new.