Set up a dark mode version of your theme
This guide shows you how to add a dark mode version of your theme. Members who prefer dark mode then see a look that matches your brand, not a plain inverted page.
Who can do this: Admins with the Web Editor role (the website:edit permission). If you don’t have it, the theme controls show as read-only.
Before you start
Section titled “Before you start”- Pick and set up your everyday (light) theme first. See Choose and customize your theme.
- You set the dark version once. Each member sees light or dark based on their own device preference — you don’t turn it on for anyone.
- In the left sidebar, select Website, then open Theme.
- Under Appearance, select the Dark variant tab.
- Turn on Enable dark mode variant. MapleGather fills in a dark color set for you, so you’re not starting from a blank page.
- To adjust the dark shade, pick a swatch or type a hex code in the Primary color box.
- Watch the contrast meter below your color. It checks your dark colors the same way it checks your light ones.
- To keep your website and email branding in sync, leave Apply theme to email templates turned on.
- Select Save changes.
Verify
Section titled “Verify”You’ll know it worked when the Save changes button dims — there’s nothing left to save. The Dark variant tab keeps the colors you set. Members who use dark mode now see your dark version. Members in light mode still see your Light theme.
If something goes wrong
Section titled “If something goes wrong”- Your dark color shows a contrast warning — the color is hard to read on a dark background. Pick a lighter shade, or read About theme color contrast to decide whether to save it anyway.
- You turned off the variant but your colors are still there — that’s expected. Turning Enable dark mode variant off keeps your dark colors saved for later; it just stops showing them to members. Turn it back on any time.
- A member says they don’t see dark mode — dark mode follows each member’s own device or app setting. Ask them to turn on dark mode in their preferences; your dark version then appears for them.