Theme colors

Colors

In the colors tab you can find the global color settings of the theme. The primary color (1) and secondary color (2) are the main colors of the store.

The Primary and Secondary colors should never be transparent and usually not #ffffff (white), as these colors are also used as foreground colors.

Therefore, always make sure that these colors have sufficient contrast to the color of the Body background (4) and Shop background (5).

Exception: You want to create a dark layout with a dark Body background and Shop background color. Then it may be necessary to use light primary and secondary colors.

The value for Meta Theme-color (6) specifies a color that browsers should use to match the display of the page or surrounding UI. Especially seen on mobile devices..

theme-color - HTML: HyperText Markup Language | MDN

Body background vs Shop background

The global background colors of the store are divided into body background and store background. The Body background (4) is thereby the background of the entire HTML document (Body). The shop background (5) is the background of the store, which in turn is the HTML document.

Note: The arrow from the primary color to the body background field shows that colors can be further used in other fields based on their variables.

Basic configuration

There are certain areas in the theme whose foreground color is determined based on the background color. This is the case with the primary buttons, for example. The contrast ratio determines when the brightness of the color changes from "dark" to "light".

Example:

Threshold 4.5

Threshold 2

In Shopware 6.5, the calculation basis has been adapted to the Web Content Accessibility Guidelines (WCAG).

The contrast threshold (1) is therefor used to calculate contrast colors. For example, if the background color of a button is old pink #d9ab98 and there is set at a threshold of 4.5 the foreground color as a contrast color will be calculated as a dark color. At a threshold value of 2 the foreground color of the button will be calculated as a light color.

The contrast threshold setting may affect the readability of certain elements. By default, a contrast threshold of 4.5 provides optimal readability.