Theme Variants
Every section is either Light or Dark. A light section uses your palette’s light background with dark text; a dark section uses the palette’s dark background with light text. You set the variant per section, so a page can alternate between the two.
When to use it
Section titled “When to use it”- To separate one section from the next, or give a statistic band or call to action more weight.
- To make a section with a background image or video readable, alongside its overlay.
The colours themselves (backgrounds, text, surfaces, borders for each variant) come from your palette. To change them for the whole site, see Colors & Branding.
How to change a section’s variant
Section titled “How to change a section’s variant”- Select the section in the editor.
- Open its Layout tab.
- Under Section Theme, set Theme Variant to Light or Dark.
New sections start as Light, except Stats, which starts as Dark. When you generate sections in the editor, the Strategy you choose in Generate Sections with AI sets their variants: Balanced, Light Theme, Dark Theme or Smart Auto. When an AI assistant deploys through the connector, any section sent without a variant gets one chosen for it; a variant that is set is kept.
Other controls in Section Theme
Section titled “Other controls in Section Theme”| Control | What it does | Default |
|---|---|---|
| Section Palette | Gives this section a different palette from the rest of the site. Reset to global colors removes it. | Global palette |
| Background Type | Solid Color or Image (Hero also offers Video). | Solid Color |
| Background Color | Theme Default uses the variant’s background. Custom Color lets you pick one for this section. | Theme Default |
| Overlay | For image and video backgrounds, a colour layer over the media, set with Overlay Color. | None |
When you pick a Custom Background Color, choose a light colour for a Light section and a dark one for a Dark section. The variant still decides which of your palette’s text colours the section starts from.
How contrast is kept readable
Section titled “How contrast is kept readable”Text, links, icons and borders in a section are coloured from tokens that know which variant, and which background, they sit on. Section-level text is measured against the section background; text inside cards is measured against the card surface.
With Smart Accessibility Colors turned on (Global settings → Colors → Quick Setup), Promptless WP checks each of those colours against its background when the page is drawn. Where one falls below a 4.5:1 contrast ratio, it adjusts that colour, keeping as close to your brand colour as it can. Borders are held to 3:1. The setting is off by default.
On a section with a Custom Background Color, text, links and icons are always checked against that colour and adjusted where needed, whether or not the setting is on, because the backdrop is no longer the palette’s.
Limits and common problems
Section titled “Limits and common problems”- Only two variants. Every section type accepts
lightanddark, and nothing else. - Text on a custom background looks plain black or white. The colour does not suit the variant, for example a near-black background on a Light section, so your palette’s text colours could not reach contrast and were replaced. Switch the variant to match the background.
- Text is hard to read on an image. Set Overlay to Enabled and choose an Overlay Color that matches the variant: dark for Dark, light for Light.
- Brand colour looks different in a dark section. Smart Accessibility Colors lightened it to meet contrast on the dark background. Turn the setting off to use the colour exactly as set, and check contrast yourself.
- Neo-brutalist cards and buttons are not a variant. They are a site-wide style under Global settings → Borders → Card & Button Style, and apply in both variants.