Skip to main content

Color Palette

We have seen that in the CMS we work on components which are then dynamically assembled to create pages. However, each site typically has a color palette that all components must adhere to. This recipe explains how to design components to adhere to a common color palette.

It is possible to set the color palette in two ways:

  • at page level
  • at the layout page level

If you are building a landing page made up of a single page, simply set it at page level, while if the site is made up of multiple pages it is better to use a layout page, so that all pages can share the same palette. For further information on layout pages, please refer to the specific section.

In both cases, you can set the color palette in the Settings section. Once the colors have been chosen, they will be accessible on the frontend. To easily access the palette from the components yes recommend using the usePalette() hook, for example:

const palette = usePalette();
const bgColor = palette.background_color;
// for a list of available colors it is recommended to directly inspect the JSON returned by the API.

The usePalette() hook checks whether the page is associated with a layout or not. In the first case, it will return the layout page palette, otherwise that of the current page. In this way the developed components work in both cases, facilitating their reuse.

Note: The object returned by usePalette() also contains other page attributes, such as the title and slug. This is because today the palette is saved together with the other page attributes. This situation may change in the future, so it is recommended to use these hooks in order to be independent from the structure of the page JSON.

Override Colors Palette (advanced)​

Let's imagine we want to give maximum flexibility in color management for a site made up of multiple pages. On the layout page we put the palette common to all pages. On a specific page, we can set a palette that overrides the main palette, for example because we want change the color of the components on this page.

If we want to allow this flexibility, we should not use usePalette(), but a slightly more complex hook that checks if a certain palette color has been set at page level (e.g. background) and use that instead of the page one of layout. The hooks provided in the connector, for simplicity, do not handle this case, but it is possible to create such a hook quite easily.

Another possibility is to choose, for a certain type of component, which color from the palette to use as the background. On many sites there are pages that contain the same repeated component, with variations in the background color. In this case, we can add an attribute to the component, e.g. bgColor, of type Color. If the user sets a color, this attribute is used. Otherwise, the palette color is used as a fallback. Since the background color often comes from the palette anyway, the CMS color picker suggests the colors from the palette, even if it then offers the possibility to choose any color.

The colors of the selector palette come from the layout page, if it has been docked to the page hosting the component, or from the page itself.