Colours and dark mode
Go to Appearance > Customize > Colors. Every site colour is in this one section.
Palettes
Section titled “Palettes”At the top are ready-made palettes: Ocean, Forest, Sunset, Berry and Slate. Choosing one fills in every colour below, and you can then change any of them. Default puts all colours back to the theme’s own. A palette is a starting point, not a lock: once you change a colour by hand the palette card is no longer highlighted. All palettes keep text readable (WCAG AA).
Developers can add palettes with the knowx_color_palettes filter.
Colours you can set
Section titled “Colours you can set”| Colour | What it changes |
|---|---|
| Theme Color | Buttons, highlights and the base of the link colour. Eight quick picks sit under the picker. |
| Link Color | Links. Leave empty to use a darker shade of the theme colour. |
| Text Color | Body text. |
| Heading Color | Headings and titles. |
| Page Background Color | The page behind the content. |
| Content Background | Cards, boxes, the header and the article area. |
| Header Background | The header bar. |
| Footer Text | Text in the footer. |
| Copyright Background, Copyright Text | The copyright line. |
Link and button text colours are chosen automatically so they stay readable on the theme colour. A background image for the footer is set under Site Footer.
Each product also has its own icon colour: on Posts > Categories, pick Automatic, one of the swatches or your own colour, and an icon. The product colour is used for that product’s card, icon and page header. Buttons and links always follow the theme colour.
Dark mode
Section titled “Dark mode”Under Dark Mode choose the default mode: light, dark or follow the visitor’s device. The header toggle lets visitors change it, and their choice is remembered in their browser.
Dark mode has its own palette. Your text, background and content colours apply in light mode only, so a dark page never ends up with dark text on a dark background. The theme colour carries over.