Colors

Schemes

Color schemes can be applied to sections throughout your online store.

Access Theme Customization:

Log in to your Shopify admin dashboard.
Navigate to “Online Store” and select “Themes”.
Find the theme you want to customize and click “Customize” next to it.

Access Color Settings:

Within the theme customization panel, locate and click on the “Color Settings” option.

Edit Color Schemes:

If you wish to modify an existing color scheme, click on it. To create a new scheme, click “Add Scheme”.

Adjust Color Settings:

Within the selected color scheme, locate the specific content type (e.g., background, text color, button color...) you want to change.
Click on the color swatch associated with that content type.

Select or Enter Color Values:

Choose a new color by entering a hexadecimal color code directly into the text field, or use the color picker to visually select your desired color.
For transparency, clear the hex code field to set the color as transparent.

Save Changes:

After setting your desired colors, click “Save” to apply the changes to your color scheme.

Toggle between day and night modes to suit your preference.

Setting	Description
Theme mode	Select the default appearance of your theme. Light – Uses a light background with dark text. Dark – Uses a dark background with light text. Note: To see changes in preview, you may need to clear your cache or check in an incognito window.
Enable dark/light mode toggle	When enabled, a toggle icon appears in the header: In light mode, a moon icon lets users switch to dark mode. In dark mode, a sun icon lets users switch back to light mode.
Main colors for modes:	Select the primary color schemes for both light and dark modes. When you assign the light mode scheme to a section, block, or template, it will automatically switch to the corresponding dark mode scheme when the theme mode is toggled using the icon in the header.
Light mode main color	Primary color scheme used throughout the theme when light mode is active.
Dark mode main color	Primary color scheme used throughout the theme when dark mode is active.
Secondary colors for modes :	These are additional color schemes that can be applied to sections, blocks, or templates if you want to use different accent colors for light and dark modes. The secondary color scheme set for light mode will automatically switch to the corresponding dark mode secondary scheme when the theme mode is toggled.
Light mode secondary color	Secondary color scheme used throughout the theme when light mode is active.
Dark mode secondary color	Secondary color scheme used throughout the theme when dark mode is active.

Choose default mode for entire theme
Enable the toggle in header

Apply color schemes for light and dark modes

Open section, block, or template settings and choose scheme for light mode — primary or secondary