Shared controls
Color modes: Light and dark sections
Every Omni module has Styles → Background → Color mode, and the theme has a matching setting under Theme → Theme settings → Color modes. Together they let you build a dark site, a light site, or a light site with a few dark sections, without touching individual color fields.
On this page
The module setting
| Choice | What happens |
|---|---|
| Use theme setting | The module follows Theme settings → Color modes → Color mode. This is the default, so switching the theme setting changes every module at once. |
| Light | The module keeps the light palette (the Global colors) even when the theme is dark. |
| Dark | The module paints itself with the dark palette: The section background, cards, panels, lines, icon chips, switchers, headings, text, links and buttons. |
A dark module behaves like this:
- Background type «None» paints the theme's dark page background, so the section is dark even on a light page.
- Background type «Color» that was left at the theme Surface color turns into the dark card surface. A color you chose yourself stays as it is, so pick a dark one.
- Gradients, images and videos stay as they are. Light text on dark background is switched on for you.
- Cards (elevated, tinted and outlined) sit on the dark card surface with light text. Highlighted pricing plans and the CTA Band keep their brand color.
- Buttons use the on-dark variants: A light primary button with brand text, outline buttons in the text color.
- Forms keep their light fields from Theme settings → Forms, and the labels turn light.
The theme setting
Theme settings → Color modes holds the site-wide Color mode and the dark palette:
| Setting | Used for |
|---|---|
| Color mode | Light or Dark for every module set to «Use theme setting», the page background, the Site header, the blog and any text outside modules. |
| Dark: Page and section background | The page itself and dark sections with Background type «None». |
| Dark: Cards and panels | Cards, form panels, table rows and the Surface-color swap. |
| Dark: Icon chips and tinted areas | Icon chips, switcher tracks, hover backgrounds and the second tint. |
| Dark: Text | Headings and text. Body text in cards is drawn slightly softer. |
| Dark: Body text | Paragraphs, list items, card text and lead text, a little softer than the headings. |
| Dark: Muted text | Captions, roles, dates and notes. |
| Dark: Icons and check marks | Check marks, plus marks, icons and markers. Follows the Accent color until you change it. |
| Dark: Borders and lines | Hairlines, card borders, dividers and table lines. |
| Dark: Links and highlights | Links, highlighted words, icons, check marks and hover colors. Follows the Accent color until you change it. |
The Site header has the same Color mode choice under Styles → Background. Dark paints the bar, the dropdown panels and the mobile menu with the dark palette; the bar colors below it apply to the light mode.
Good to know
- Start with the theme setting. Use the module setting for the exceptions: A dark customer story on a light site, or a light form section on a dark site.
- The dark palette should keep the same contrast as the light one: Text on «Cards and panels» at 4.5:1 or better.
- Light text on dark background is still there for dark photos, videos and gradients on a light site. Dark color mode switches it on by itself, so the toggle hides while Dark is chosen.
- Photos and logos are not changed. Logos in the Image and logo scroller stay white on dark sections.
- See Colors for the light palette and Backgrounds for the background types.
What follows which setting in Dark color mode
| Element | Setting |
|---|---|
| Headings, card titles, names | Dark: Text |
| Leads, descriptions, card and body text | Dark: Body text |
| Notes, captions, roles | Dark: Muted text |
| Eyebrows, accent words, figures | Theme Accent color |
| Icons and check marks | Dark: Icons and check marks |
| Links | Dark: Links |
| Site footer text, column titles and links | Theme settings → Website footer |
Support
Did this answer your question?
If not, write to us and say which page you were on.