Colors
In Shopify, the color scheme functionality allows you to define custom sets of colors within the theme settings and apply them across different sections or blocks in your store. Here's a quick guide on how to manage this:
Steps for Creating and Applying Color Schemes:
- Define Color Schemes:
- Navigate to your Shopify admin and go to Online Store > Themes.
- Click on Customize for the theme you want to edit.
- In the Theme Editor, locate the Theme settings tab and choose colors.
- Here, you can define your brand's color palette by setting primary, secondary, accent, and background colors.
- Apply Color Schemes:
- After creating your color schemes, you can apply them to different sections of your store.
- In each section or block, you'll see a Color scheme dropdown.
- Select the appropriate color scheme for each section, ensuring consistency with your brand's identity.
- By managing your colors at this level, you can create a cohesive, visually appealing store design that maintains brand consistency across all pages.
| Setting | Description |
|---|---|
| Enable dark/light mode toggle | Master switch for the whole feature. When turned on, a sun/moon toggle icon appears in the header, letting shoppers switch the storefront between light and dark appearance. It also reveals all the other settings in this section. |
| Theme mode | Sets which mode (Light or Dark) the store shows by default on a visitor's first page load. Once a visitor manually toggles the mode, their choice is saved in the browser (localStorage ) and takes priority over this default on their next visits. |
| Light mode main color | Selects which color scheme is used as the site's primary scheme while Light mode is active. Any section assigned to this scheme automatically swaps to the Dark mode main color scheme when the visitor switches to dark mode. |
| Dark mode main color | The color scheme that replaces Light mode main color across the site when Dark mode is active. |
| Light mode secondary color | A second, independent scheme pairing — lets a different group of sections (assigned to this scheme) have their own light-mode colors, separate from the main pairing above. |
| Dark mode secondary color | The color scheme that replaces Light mode secondary color when Dark mode is active. |
| Switch preloader | Turns on/off a short full-screen transition animation that covers the page while the mode is being switched, instead of the colors changing instantly. |
| Switch to light mode preloader background | Background color of the transition overlay shown while switching to light mode. Only used when Switch preloader is On. |
| Switch to dark mode preloader background | Background color of the transition overlay shown while switching to dark mode. Only used when Switch preloader is On. |
| Switch to light mode preloader logo | Logo displayed centered on the transition overlay while switching to light mode. Only used when Switch preloader is On. |
| Switch to dark mode preloader logo | Logo displayed centered on the transition overlay while switching to dark mode. Only used when Switch preloader is On. |
| Switch preloader logo width | Width of the preloader logo on desktop. The adjustable range is 50px to 200px. |
| Switch preloader logo width mobile | Width of the preloader logo on mobile devices. The adjustable range is 30px to 130px. |
Field visibility conditions:
- All fields except Enable dark/light mode toggle appear only when this toggle is turned on.
- The "Switch to light/dark mode preloader background", "Switch to light/dark mode preloader logo", "Switch preloader logo width", and "Switch preloader logo width mobile" fields appear only when Switch preloader is set to On.