Skip to content
ZenTheme Lab
Pricing

Guide · Dark mode

Zendesk Help Center dark mode: what it takes and how to add it

Your agents can use dark mode in Zendesk. Your customers cannot, on the Help Center. Here is what a good one needs, and how to add it.

Updated

Dark mode is a normal expectation now. Many visitors set it system-wide and expect every site to follow. A Help Center that glares white at night reads as unfinished.

What Zendesk's built-in dark mode covers

Zendesk offers dark mode for agents, in the agent workspace. It is a setting on the agent's own account. It does not change your public Help Center, which stays light for every visitor.

The Help Center is a theme, so dark mode there is a theme feature. You either build it into your theme or use a theme that has it.

What a good Help Center dark mode needs

Five things separate a real dark mode from a quick filter.

  1. Separate palettes per mode. Inverting colors or stacking a filter on top gives muddy results. Each mode needs its own brand, text, link, surface and border colors.
  2. No flash on load. If the page paints light and then switches, dark-mode visitors get a white flash on every page.
  3. Contrast in both modes. Colors that pass on white often fail on near-black. Both modes need checking, including muted text.
  4. Every page follows the mode. A dark home page that opens a white request form feels broken.
  5. A visitor toggle that respects the system. Most visitors want their system setting. Some want to override it, and the choice should stick.

How ZenTheme Pro does each one

Separate palettes per mode

Colors and Dark mode colors are two separate groups in the theme settings. Each has brand, text, link, background, surface and border.

No flash on load

The visitor's choice is applied before the page first paints, so the wrong mode never shows.

Contrast in both modes

The default light and dark palettes meet WCAG AA contrast. Muted text is derived from each palette, so it stays readable when you change colors. The theme was tested with axe-core in both modes.

Every page follows the mode

Request forms, the service catalog, approval requests, flash notifications and the request list share the same light and dark state.

A visitor toggle that respects the system

A header toggle, switched on with Show light/dark toggle, remembers the choice. You set the default for new visitors: match their system, always light, or always dark.

There is also a separate logo for dark mode, with its own height controls for desktop and mobile. Every one of these settings is in the Standard license.

If you already have a custom theme

You can add dark mode to it. Define your colors as variables, add a second set for dark, set the mode before first paint, and then walk every template, including the request form. The request form is the part most people miss. If you would rather not, this is a service I offer.

Not affiliated with Zendesk.