The Colors group in Theme settings sets the colors of every page in your store. It holds the colors for light mode, a second set for dark mode, and an accent gradient that both modes share. Dark mode is the dark version of your store that visitors see when their device is set to dark, or when you choose it for everyone in Choose light, dark or automatic color mode.
Which part of the page each color paints
Color palette holds the six light mode colors: background, text, primary, primary contrast, and two accent colors.
A collection page uses six of the colors below at once, from the announcement bar to the fill behind each product photo.
123456
Palette background - The page background. Mixed with Surface tint, it also gives the light gray fill of cards, form fields and empty image boxes.
Palette text - All text, and the thin lines between parts of the page. Gray secondary text is a lighter mix of the text and the background.
Palette primary - Filled buttons, the round add to cart button and the score seal on product cards, and the background of the announcement bar and the footer.
Palette primary contrast - Text and icons on everything the primary color fills.
Accent gradient - The accents listed under this table.
Surface tint - A tint mixed into the background for cards, fields, empty image boxes, and the fill that appears when the pointer is over a link. Light mode only.
Four more colors do not show on that page. The palette's two accent colors paint nothing on your store's pages by themselves, because the accent comes from Accent gradient. You can still pick them in the theme's other color settings. Accent gradient text colors text on the gradient, in both light and dark mode. Rating star colors the star in the Testimonials section's rating, and the filled dots of product metrics, on cards and on the product page, when Metric style is Dots.
The accent gradient paints:
buttons with the Accent style, as a colored outline
the product tag label on product cards, such as a Best seller ribbon
Eyebrow text in the Text block
the second row of a Marquee section with the Tape style
the Card rail panel when Panel color is Accent
the newsletter button when its Button style is Label
bold words in announcement bar messages, the header's promo link, and the badge on a Link with icon block
the outline around the search, newsletter and discount code fields while a customer types in them
the progress line of the chapter indicator, the Video section's play button with the Text ring style, and its Live dot
In dark mode, the four colors under Dark mode colors take the place of the palette's background, text, primary and primary contrast. The accent gradient and its text color stay the same in both modes.
In the picker that opens, set the gradient's colors. For one flat color, give both ends of the gradient the same color, as the Lair and Fang theme styles do.
Under Accent gradient text, pick a color that is easy to read on the gradient.
Click Save.
Set dark mode colors
Dark mode colors has four colors: Dark mode background, Dark mode text, Dark mode primary button and Dark mode primary button text. They apply in dark mode, and also in light mode wherever a section turns dark: a section with a dark custom background, a photo darkened with Overlay opacity, and the whole page during a Dark moment.
The editor preview follows your computer's light or dark setting. To check your dark mode colors while you edit, set Color mode to Dark, and set it back before you click Save.
Colors that sections change
Most sections can paint their own background. Under Background, Background type set to Color offers Surface and Surface, stronger, two shades of your page background that turn dark in dark mode, and Custom, one color that stays the same in both modes. A custom color darker than mid gray switches the section's text and buttons to your dark mode colors. Text color sets one color for the text over a photo, a video or a custom color. Add a background image or video to a section covers these settings.
Two more settings use your colors in their own way:
Dark moment, in each section's motion settings, turns the whole page to your dark mode colors while that section is in the middle of the screen. Divide your home page into chapters shows how to use it.
Panel color in the Card rail section fills the panel next to the cards. Surface is a light shade of your background. Contrast is your primary color in light mode. Accent is the accent gradient. Outline is your background inside a thin border.
Color settings describes every setting in the Colors group.
The Colors group in Theme settings sets the colors of every page in your store. It holds the colors for light mode, a second set for dark mode, and an accent gradient that both modes share. Dark mode is the dark version of your store that visitors see when their device is set to dark, or when you choose it for everyone in Choose light, dark or automatic color mode.
Which part of the page each color paints
Color palette holds the six light mode colors: background, text, primary, primary contrast, and two accent colors.
A collection page uses six of the colors below at once, from the announcement bar to the fill behind each product photo.
Four more colors do not show on that page. The palette's two accent colors paint nothing on your store's pages by themselves, because the accent comes from Accent gradient. You can still pick them in the theme's other color settings. Accent gradient text colors text on the gradient, in both light and dark mode. Rating star colors the star in the Testimonials section's rating, and the filled dots of product metrics, on cards and on the product page, when Metric style is Dots.
The accent gradient paints:
In dark mode, the four colors under Dark mode colors take the place of the palette's background, text, primary and primary contrast. The accent gradient and its text color stay the same in both modes.
Set your light mode colors
#1a1a1a, or pick a color.Change the accent gradient
The gradient does not follow the palette. When you change your brand colors, change the gradient as well.
Set dark mode colors
Dark mode colors has four colors: Dark mode background, Dark mode text, Dark mode primary button and Dark mode primary button text. They apply in dark mode, and also in light mode wherever a section turns dark: a section with a dark custom background, a photo darkened with Overlay opacity, and the whole page during a Dark moment.
The editor preview follows your computer's light or dark setting. To check your dark mode colors while you edit, set Color mode to Dark, and set it back before you click Save.
Colors that sections change
Most sections can paint their own background. Under Background, Background type set to Color offers Surface and Surface, stronger, two shades of your page background that turn dark in dark mode, and Custom, one color that stays the same in both modes. A custom color darker than mid gray switches the section's text and buttons to your dark mode colors. Text color sets one color for the text over a photo, a video or a custom color. Add a background image or video to a section covers these settings.
Two more settings use your colors in their own way:
Color settings describes every setting in the Colors group.