About

branding colors are a set of principal colors that determines your brand visually.

They should be the most used colors in your theme.

In ComboStrap, they are called:

• primary
• secondary

The primary color is the color

• displayed most frequently with the most importance
• that should have the most lightness and saturation

The secondary color :

• is the second color in importance
• is used to give another color accent if your theme is dual-tone.
• is darker and mostly used in the text (This is the default color of icon for instance)

Usage

They are:

• used as the default colors in the following components:
  • brand button,
  • icon,
  • svg
  • highlight
  • links
• advertised in the app manifest

Color Name Precedence

When the color are set, they will take precedence:

• as color name
• and as color type.

For instance, a button:

• that has the primary type has default
• will take the primary color of this installation (ie #7611F7)

<btn>[[#|A button with the default primary color]]</btn>

• Output:

Branding Color Inheritance

The branding color inheritance is a feature that will apply automatically the primary color to the following component.

• icon (with a size above two 2rem or used as illustration)
• highlight (light based)
• link (gray based only in main content)
• identity forms focus and button (login, register, resend, …)

You can disable this feature in the configuration.

Example

The image below shows as example a list of primary/secondary colors that are the basic block for a theme.

This list of colors is used by Chrome to choose your theme for your profile (chrome://settings/manageProfile)