Dark mode
Dark mode shows the banner in a dark color set for visitors whose device is set
to dark. It follows the device's prefers-color-scheme setting. Visitors on a
light device keep your normal colors.
This is separate from the Dark theme preset, which is just a starting palette you apply yourself.
Enable dark mode
- Open Banner Settings in the dashboard at my.optsens.com.
- Open the Dark mode section.
- Turn on Enable dark mode.
- Optionally set custom dark colors. Leave them empty to use the built-in dark theme.
- Click Save Changes.
The same section appears in the Banner step of the guided onboarding when you set a domain up for the first time.
When dark mode is on, a sun/moon button appears in the top-right of the preview to switch between the light and dark color sets while editing.
Custom dark colors
If you do not set any custom colors, OptSens uses a built-in dark theme. To override it, set values for:
| Group | Fields |
|---|---|
| Banner | Background, Text |
| Accept & Reject buttons | Background, Text, Border |
| Manage & Confirm buttons | Background, Text, Border |
OptSens derives borders, cards, links, and toggle colors from the background and text you set, which keeps the dark banner consistent. The contrast checker warns if the dark banner text or buttons may be hard to read.
How it switches
Each visitor's device decides. The banner reads prefers-color-scheme when it
loads and applies the matching color set. If the visitor changes their device
setting while the banner is open, the colors switch live.
Plan gating
Dark mode is gated by plan. If the section shows a plan badge, dark mode is not included on your current plan.
Interaction with A/B testing
If you run an A/B test with custom variant colors while dark mode is on, the dark colors override the variant colors for visitors on a dark device. The A/B Testing page shows a warning when this combination is active.