---json
{
    "canonical": ":branding-colors",
    "description": "The branding colors are the most dominant colors of your theme. They bring a connection to your brand.",
    "name": "Branding Colors",
    "page_id": "dekm076qg7x0sbn89uelp"
}
---
====== Branding Colors (primary, secondary) ======



===== About =====
''branding colors'' are a set of principal <icon name="bi:palette-fill" width="16"/> [[docs:styling:color|colors]] that determines your [[..:app:branding|brand]] visually.

They should be the most used colors in your [[:docs:theme:theme|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 [[:docs:content:icon|icon]] for instance)



===== Usage =====

They are:
  * used as the default colors in the following components:
      * [[docs:menubar:brand|brand button]], 
      * [[:docs:content:icon|icon]], 
      * [[:docs:content:svg|svg]]
      * [[:docs:content:highlight|highlight]]
      * [[:docs:content:link|links]]
  * advertised in the [[docs:app:manifest|app manifest]]


===== Color Name Precedence =====

When the color are set, they will take precedence:
  * as [[docs:styling:color|color name]]
  * and as color type.

For instance, a [[docs:content:button|button]]:
  * that has the ''primary'' type has default
  * will take the ''primary'' color of this installation (ie ''#7611F7'')

<webcode >
<code dw>
<btn>[[#|A button with the default primary color]]</btn>
</code>
  * Output:
</webcode>

===== Branding Color Inheritance =====

The branding color inheritance is a feature that will apply automatically the primary color to the following component.
  * [[docs:content:icon|icon]] (with a size above two [[docs:styling:scale|2rem]] or used as illustration)
  * [[docs:content:highlight|highlight]] (light based)
  * [[docs:content:link|link]] (gray based only in main content)
  * [[docs:app:identity|identity forms focus and button (login, register, resend, ...) ]]

You can [[#disable_the_branding_color_inheritance|disable this feature in the configuration]].


<note>
For [[docs:seo:seo|SEO purpose]], we make sure that the contrast ratio is enough for best readability (if not, we change it to go above the minimum of 4.5 (([[https://web.dev/color-contrast/|Contrast ratio minimum]] ))
</note>
===== Configuration =====

==== Colors ====

You can set the brand colors in the [[docs:app:configuration|configuration]] with the ''primary-color'' and ''secondary-color''  property.

==== Disable the branding color inheritance ====

You can disable the inheritance of the branding colors with the ''brandingColorInheritanceEnable'' [[docs:app:configuration|configuration]]. The [[docs:theme:bootstrap|color of the bootstrap stylesheet]] will then take over.

===== Example =====

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

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

{{:docs:styling:primary_secondary_color.png|}}