Colors theme settings
The Colors theme settings set the background, text and accent colors of Kingdom's sidebar and drawers, the page body and the footer.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
Kingdom has three color areas: the sidebar, the body and the footer. Each area has the same three colors: Background, Text and Accent.
Where to find it: Theme settings → Colors
Sidebar colors
The Sidebar colors apply to the sidebar and to every drawer that slides out of it:
- the sidebar itself, with the logo, the menus and the icons, and the second and third menu panels;
- the cart drawer, the search drawer and the mobile menu;
- the collection and search filter drawer, and the pickup availability drawer on the product page.
Buttons inside the sidebar and drawers use the sidebar Text color as their background. Accent is the hover color of the sidebar links, icons and buttons.
Body colors
The Body colors apply to the rest of the page, except the footer.
- Background and Text are the page background and the main text color. Solid buttons use the Text color as their background.
- Accent is the hover color of links, buttons, toggles and pagination, and the color of the sale badge on product cards.
Kingdom picks the color of the text on buttons for you: black on a light Text or Accent color, white on a dark one.
Footer colors
The Footer colors apply only to the Footer section at the bottom of every page. Accent is the hover color of the footer links and icons. Other sections in the Footer group, such as Text columns with icons, use the Body colors.
Why does my cart drawer use the sidebar colors?
Because every drawer in Kingdom belongs to the sidebar. The cart drawer, the search drawer, the mobile menu and the filter drawer take their colors from Theme settings → Colors → Sidebar. To change them, change the Sidebar colors; there is no separate drawer color.
Can I give one section its own colors?
Yes, in the sections that have custom color settings. Many Kingdom sections have their own text and background color settings, which override the Body colors for that section only. See General section settings.
All Colors settings
Every setting in this group, with its type and default.
Colors theme settings: Sidebar
Where to find it: Theme settings → Colors → Sidebar
Background (color, default: #ffffff): Sets the background of the sidebar, the menu panels and every drawer: cart, search, mobile menu, filters and pickup availability.
Text (color, default: #000000): Sets the text and icon color of the sidebar and the drawers, and the background of solid buttons inside them.
Accent (color, default: #ff0000): Sets the hover color of links, icons and buttons in the sidebar and the drawers.
Colors theme settings: Body
Where to find it: Theme settings → Colors → Body
Background (color, default: #ffffff): Sets the page background of every section except the footer.
Text (color, default: #000000): Sets the main text color of the page and the background of solid buttons. Button text turns black or white automatically for contrast.
Accent (color, default: #ff0000): Sets the hover color of links, buttons, toggles and pagination, and the color of the sale badge on product cards.
Colors theme settings: Footer
Where to find it: Theme settings → Colors → Footer
Background (color, default: #1a1a1a): Sets the background of the Footer section.
Text (color, default: #ffffff): Sets the text and icon color of the Footer section.
Accent (color, default: #909090): Sets the hover color of links and icons in the Footer section.
Related pages
- Layout theme settings: the space between sections and grid columns.
- Typography theme settings: fonts and text sizes.
- Sidebar section: the logo, menus and icons that use the sidebar colors.
- General section settings: custom colors for one section.
- Kingdom presets: the colors each theme style sets.
Prince preset
The Prince preset: a red sidebar with white text, Montserrat fonts and product captions shown over the image on hover in Kingdom.
Typography theme settings
The Typography theme settings choose Kingdom's heading and body fonts, their base sizes, the sidebar menu text size and the button corner radius.