Basker Docs

Colour scheme in blocks

Apply a coordinated color scheme to a block and understand how the site-wide default is set.

A color scheme is a coordinated palette: background, text, and button colors that work together. Your theme defines a set of schemes, for example a light scheme, a dark scheme, and a brand-accent scheme. Every block can pick which one it uses. Choose a scheme and the block's background, text, and buttons recolor together.

You set this in a block's Settings, alongside spacing and padding and the other shared block controls.

Pick a color scheme for a block

In the block's Settings, find Color Scheme: a picker that lists the schemes defined in your theme. Choose any one of them, and the block adopts that palette.

Each block can use a different scheme. A block left unset uses the site default scheme (see below).

Override the background and text directly

Below the scheme, turn on Custom Colors (off by default) to reveal two controls that replace individual colors for this block only:

  • Background Color: the block's background color.
  • Text Color: the block's text color. Left at its default, this stays an automatic readable color that adjusts to the background.

Until you turn Custom Colors on, these two controls stay hidden and the block follows its scheme. Use them when a single block needs a one-off color that none of your schemes provide. Otherwise, pick a scheme so the palette stays consistent.

The header and footer blocks also offer an Inherit Color Scheme toggle on areas like the drawer, dropdown menu, mega menu, and newsletter input. It is on by default, so those areas match the header's or footer's scheme. Turn it off to give the area its own scheme.

The default scheme changes the whole site

You set one scheme in your theme as the site default. Every block that has not picked its own scheme inherits it, so it is the color foundation for your entire site.

Editing the default recolours everything

Editing the default scheme changes colors across the whole site at once, because every unset block follows it. If you want to restyle just one block, pick a different scheme for that block instead. Or use its Background Color and Text Color overrides. Edit the default scheme only when you want a site-wide change.

Where schemes come from

You create and edit color schemes (their names and palettes) in your theme, not on individual blocks. A block only chooses among the schemes the theme already offers. Open Themes under Design in Basker and click Configure on your current theme to manage them. This is also where you set one scheme as the site default.

Where to go next

On this page