Colors (Dark)
Sets all the colors used when your store is displayed in dark mode. These only take effect when the Theme mode switcher is enabled.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Colors (Dark)
Settings
General colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Price | Sets the color used for product prices across your store in dark mode | Color picker | None (uses theme fallback) |
| Sale price | Sets the color used for sale prices when a product is discounted in dark mode | Color picker | None (uses theme fallback) |
| Error | Sets the color used for error messages, such as form validation alerts, in dark mode | Color picker | None (uses theme fallback) |
| Success | Sets the color used for success messages, such as confirmation notices, in dark mode | Color picker | None (uses theme fallback) |
| Selection highlight | Sets the background color that appears when a visitor highlights text on your store in dark mode | Color picker | #3a5a8a |
| Selection text | Sets the text color that appears when a visitor highlights text on your store in dark mode | Color picker | #ffffff |
Primary colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Background | Sets the background color for sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Heading | Sets the color for headings in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Highlights heading | Sets the color for highlighted headings in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Text | Sets the color for body text in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Link | Sets the color for links in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Button background | Sets the background color for buttons in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Button text | Sets the text color for buttons in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Button border | Sets the border color for buttons in sections using the primary color scheme in dark mode | Color picker | None (uses theme fallback) |
Secondary colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Background | Sets the background color for sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Heading | Sets the color for headings in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Highlights heading | Sets the color for highlighted headings in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Text | Sets the color for body text in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Link | Sets the color for links in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Button background | Sets the background color for buttons in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Button text | Sets the text color for buttons in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
| Button border | Sets the border color for buttons in sections using the secondary color scheme in dark mode | Color picker | None (uses theme fallback) |
Badge colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Sale** | Sets the background color for the sale badge shown on discounted products in dark mode | Color picker | #ffffff |
| **Text** (Sale) | Sets the text color for the sale badge in dark mode | Color picker | #111111 |
| **Sold out** | Sets the background color for the sold-out badge shown on unavailable products in dark mode | Color picker | #374151 |
| **Text** (Sold out) | Sets the text color for the sold-out badge in dark mode | Color picker | #ffffff |
| **Custom** | Sets the background color for any custom badges you create in dark mode | Color picker | #ffffff |
| **Text** (Custom) | Sets the text color for custom badges in dark mode | Color picker | #111111 |
Note
Where no default is listed, the color picker will be empty (transparent) until you set a value. This means the theme will use its built-in fallback colors. All dark-mode colors only apply when the Theme mode switcher is turned on.