A well-designed dark mode gives your help center a modern feel and is easier on the eyes in low-light environments. The visual builder lets you design a dark color scheme alongside your light one and preview both with a single click.
Dark mode editing is available on the Multi brand plan (shown as Pro in the app). See accessing the visual builder for plan details.
Switching between light and dark
Use the Light mode / Dark mode icon buttons in the toolbar to switch the editor between your two color schemes. Whatever mode you’re previewing is the mode you’re editing, so designing your dark mode is exactly like designing your light one—you just switch to it first.
Enabling dark mode
The first time you switch to dark mode, the builder asks whether to enable it for your theme, with or without initial dark global styles. Click Enable dark mode to confirm, and choose whether to:
- Add initial dark mode styles — start with a set of sensible dark global styles generated for you, which you can then refine, or
- Leave this off to start from a blank dark scheme and define every value yourself.
Once enabled, a dark mode toggle is added to your header (where your theme supports it) so visitors can choose the experience they prefer. Dark mode is available on the Multi brand plan.
Designing the dark scheme
With dark mode active, the same controls you already know apply to your dark scheme:
-
Adjust your dark global styles—backgrounds, text colors, borders and palettes—to set the foundation.
-
Override the color and border settings of individual elements where needed, using the color scheme toggle on the field, so an element can look different in dark mode without changing its light-mode appearance.
Because dark styles are kept separate from your light styles, you’re free to make bold choices in one without affecting the other. Design your light mode first to establish your brand, then switch to dark mode and adapt it.