Framework sets up its colors using the Colors.coffee file. It uses a two step process: starting with the base colors, it creates an additional seven shades of each. Both the base colors and the shades are available as global variables.

The default base colors are:

• #252729 black
• #c1c1c2 gray
• #ffffff white
• #eae5e0 beige
• #ffd16d yellow
• #599FA0 green
• #5399c3 blue
• #5499c3 purple
• #d96161 red

After processing, we'll have an additional set of shades for each. For example, the shades for green will be:

• #bbd8d8 green20
• #99c6c6 green30
• #79b2b4 green40
• #599fa0 green50
• #477e7f green60
• #345e5d green70
• #223d3e green80

Note that green50 is identical to green.

Since these are global variables, they may be used throughout your project without quotes. For example, to use green30 as a background color, you could write layerA.backgroundColor = green30.

It's recommended to back up Colors.coffee before modifying it.

The most basic way to customize the colors in Framework is to change the values of the base colors without changing their names. Your changes will propagate through to all other components without causing any issues.

Another simple change would be to add your own colors to the base color list. The colors you add will also get the shading treatment and will be available as global variables, along with its shades.

A more complex change would be to replace the base colors with your own. Because these colors are referenced in Theme.coffee, the module will break until you've replaced those references.

Changing the way that shades are produced is a little trickier. I wouldn't recommend it unless you're very confident in the types of changes you're looking for and the way that Colors.coffee works - but if you are, have a go.