The Colors settings set the colors of your whole store, in light mode and in dark mode. To find them, open the theme editor. In the editor sidebar, click Theme settings, then select Colors. A section can still have its own background, as Section background settings describes.
The group opens with Color mode and the six swatches of the Color palette.
Light mode and dark mode
Checkmate has two sets of colors. The Color palette paints the store in light mode. The Dark mode colors paint it in dark mode: a dark background with light text. Dark mode is not a separate design, so every section, button and card shows in both.
Setting
What it does
Color mode
Auto shows each visitor the mode their phone or computer is set to, and shows a sun and moon switch so they can change it. Their choice is remembered in that browser. Light and Dark show that mode to every visitor and hide the switch. All three styles use Auto.
The dark mode colors also paint parts of a light page:
A section with Dark moment turns the whole page dark while it is in the middle of the screen. Section motion settings explains it.
A section whose Background color is a dark Custom color, or whose photo or video has Overlay opacity above 0%, shows its buttons in the dark mode colors so they stay readable. Its text uses the dark mode colors too, unless you set the section's Text color.
Color palette
The palette holds six colors. Each one paints these parts of the store in light mode:
Palette color
What it paints
Background
The page, drawers and popups. Mixed with Surface tint, it also makes the light surfaces under cards and fields.
Text
Headings, paragraphs and icons. Lines, borders and secondary text, such as a product's vendor, use lighter versions of it.
Primary
Primary buttons, such as Add to cart, the announcement bar, the footer, the cookie banner, the add to cart disc and the score seal on product cards, and carousel arrows set to Dark.
Primary contrast
Text and icons on everything the Primary color fills.
Accent start and Accent end
Nothing. The store's accent color comes from Accent gradient.
Error and success messages use a fixed red and green that no setting changes.
Accent gradient
Setting
What it does
Accent gradient
A gradient or a single color for the store's highlights, listed under this table. It looks the same in light and dark mode.
Accent gradient text
The color of text and icons that sit on the gradient, such as a product tag label or the play icon in Video. It applies in both modes.
Surface tint
The color mixed into the palette's Background to make the light gray surfaces under product cards, form fields, image placeholders and the fills that appear when the pointer is over a link or a button. Sections whose Background color is Surface or Surface, stronger use these shades too. In dark mode, the surfaces come from the dark mode colors instead.
Rating star
The star beside the average rating in the Testimonials section, and the filled dots of ratings on product cards and the product page when Metric style is Dots in Product card settings.
The accent gradient paints:
The product tag labels on product cards.
The outline of Accent buttons.
Eyebrow text in the Text block, bold words in announcement bar messages, and the header's promo link.
The second band of a Tape marquee, and the Accent panel in Card rail.
The live dot and the play button in the Video section.
The line along the top of the screen that the chapter indicator draws.
The outline of the search and newsletter fields while a customer types in them.
Set the accent colors in Accent gradient itself. Changing the palette's accent colors does not change the gradient. For a flat accent with no gradient, give both ends of the gradient the same color, as the Lair and Fang styles do.
Dark mode colors
These colors replace the palette in dark mode, in dark sections and during a Dark moment. The accent gradient stays the same.
Setting
What it does
Dark mode background
The page, drawers and popups. The surfaces under cards and fields, the announcement bar and the footer show slightly lighter shades of it.
Dark mode text
Headings, paragraphs, icons, lines and secondary text. The announcement bar and the footer use it for their text in dark mode.
Dark mode primary button
Primary buttons and carousel arrows set to Dark.
Dark mode primary button text
Text and icons on primary buttons in dark mode.
The Checkmate style uses a black Dark mode background. Lair uses a warm dark gray and Fang a near black. Change your theme colors walks through setting your brand colors for both modes.
The Colors settings set the colors of your whole store, in light mode and in dark mode. To find them, open the theme editor. In the editor sidebar, click Theme settings, then select Colors. A section can still have its own background, as Section background settings describes.
The group opens with Color mode and the six swatches of the Color palette.
Light mode and dark mode
Checkmate has two sets of colors. The Color palette paints the store in light mode. The Dark mode colors paint it in dark mode: a dark background with light text. Dark mode is not a separate design, so every section, button and card shows in both.
Setting
What it does
Color mode
Auto shows each visitor the mode their phone or computer is set to, and shows a sun and moon switch so they can change it. Their choice is remembered in that browser. Light and Dark show that mode to every visitor and hide the switch. All three styles use Auto.
The switch shows in the header when Light/dark mode toggle is on in the Header section, and always in the mobile menu. Choose light, dark or automatic color mode has the steps.
The dark mode colors also paint parts of a light page:
A section with Dark moment turns the whole page dark while it is in the middle of the screen. Section motion settings explains it.
A section whose Background color is a dark Custom color, or whose photo or video has Overlay opacity above 0%, shows its buttons in the dark mode colors so they stay readable. Its text uses the dark mode colors too, unless you set the section's Text color.
Color palette
The palette holds six colors. Each one paints these parts of the store in light mode:
Palette color
What it paints
Background
The page, drawers and popups. Mixed with Surface tint, it also makes the light surfaces under cards and fields.
Text
Headings, paragraphs and icons. Lines, borders and secondary text, such as a product's vendor, use lighter versions of it.
Primary
Primary buttons, such as Add to cart, the announcement bar, the footer, the cookie banner, the add to cart disc and the score seal on product cards, and carousel arrows set to Dark.
Primary contrast
Text and icons on everything the Primary color fills.
Accent start and Accent end
Nothing. The store's accent color comes from Accent gradient.
Error and success messages use a fixed red and green that no setting changes.
Accent gradient
Setting
What it does
Accent gradient
A gradient or a single color for the store's highlights, listed under this table. It looks the same in light and dark mode.
Accent gradient text
The color of text and icons that sit on the gradient, such as a product tag label or the play icon in Video. It applies in both modes.
Surface tint
The color mixed into the palette's Background to make the light gray surfaces under product cards, form fields, image placeholders and the fills that appear when the pointer is over a link or a button. Sections whose Background color is Surface or Surface, stronger use these shades too. In dark mode, the surfaces come from the dark mode colors instead.
Rating star
The star beside the average rating in the Testimonials section, and the filled dots of ratings on product cards and the product page when Metric style is Dots in Product card settings.
The accent gradient paints:
The product tag labels on product cards.
The outline of Accent buttons.
Eyebrow text in the Text block, bold words in announcement bar messages, and the header's promo link.
The second band of a Tape marquee, and the Accent panel in Card rail.
The live dot and the play button in the Video section.
The line along the top of the screen that the chapter indicator draws.
The outline of the search and newsletter fields while a customer types in them.
Set the accent colors in Accent gradient itself. Changing the palette's accent colors does not change the gradient. For a flat accent with no gradient, give both ends of the gradient the same color, as the Lair and Fang styles do.
Dark mode colors
These colors replace the palette in dark mode, in dark sections and during a Dark moment. The accent gradient stays the same.
Setting
What it does
Dark mode background
The page, drawers and popups. The surfaces under cards and fields, the announcement bar and the footer show slightly lighter shades of it.
Dark mode text
Headings, paragraphs, icons, lines and secondary text. The announcement bar and the footer use it for their text in dark mode.
Dark mode primary button
Primary buttons and carousel arrows set to Dark.
Dark mode primary button text
Text and icons on primary buttons in dark mode.
The Checkmate style uses a black Dark mode background. Lair uses a warm dark gray and Fang a near black. Change your theme colors walks through setting your brand colors for both modes.