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.
Light/Dark Mode
Toggle between day and night modes to suit your preference.
| Setting | Description |
| Enable dark/light mode toggle | When this option is turned on, a toggle switch appears in the header with a label. In Light mode, the toggle is positioned to the left; in Dark mode, the toggle is positioned to the right. |
| Theme mode |
Select the default appearance of your theme.
Note: To see changes in preview, you may need to clear your cache or check in an incognito window. |
| 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 main color light and dark modes
- Some sections in the demo store use secondary colors.
- Open section, block, or template settings and choose scheme for light mode — main or secondary
Main Color
In Theme Settings, the demo uses Color Scheme 1 for Light mode main color and Color Scheme 2 for Dark mode main color. The Banner container block (Image banner section) is assigned Color Scheme 1 by default for Light mode. When Dark mode is enabled, it automatically switches to Color Scheme 2.
Light Mode (Example Image Banner Section – Banner Container)
Dark Mode
Secondary Color
In Theme Settings, the demo uses Color Scheme 3 for Light mode secondary color and Color Scheme 4 for Dark mode light color. The Announcement section is assigned Color Scheme 3 by default for Light mode. When Dark mode is enabled, it automatically switches to Color Scheme 4.
Light Mode (Example Announcement section in header)
Dark Mode
