Colors
Here is where you will define most of the colors that are on your website. There are a few sections that have unique color options (e.g. Announcement Bar).
Default scheme
Default Background
The background color for the entire website.
Default Foreground
The color that text and links will be throughout the website.
Image placeholder background
This can be a gradient or a solid color. If you don't want it to be a gradient, choose the same color as both options for the gradient, and that will create a solid color. This color will appear in the shape and size of an image before the image loads, or in a place where the layout always has space for an image (e.g. Product card), and as the background for placeholder imagery in examples.
Color schemes
Defining color schemes in theme settings allows you to create combinations that you'll be able to use throughout the theme in different sections. Every scheme has two colors: the main accent color will be the background color, and the accent contrast is the color that text, icons, and links will be on top of that background color. Make sure when choosing a contrast color that it is a high enough contrast for text to be readable on top of its accent color. There are 6 different color scheme options. Accent 1 will be the background color for primary buttons when they are on the default background. Accent 2 will be the background color for a few secondary buttons. It should be less dominant than Accent 1 color, so that secondary buttons seem less important than the primary buttons.
The "Inverse" color scheme is the opposite of the "Default" scheme, with the default background as the text color, and the default foreground as the background color.
Whenever there are two buttons in an area that has a color scheme applied to it, the first button will be that color scheme's accent contrast color and the second button will be a lighter version of that same color. In a "Default" color scheme, the first button will be the primary button (Accent 1 color scheme) and the second button will be the secondary button (Accent 2 color scheme).
Header & Footer
Background & Font colors that can be specific to these sections.
Overlay color
(for Whisk 3.0.0 and later. In earlier versions of Whisk, this setting can be found under "Styles")
Choose one a color from the color scheme for the slightly transparent overlay on the site that occurs behind a modal or drawer (e.g. mobile menu, cart drawer, promo popup).
