Skip to main content

Use dark mode and event colors in the admin panel

C
Written by Customer Success

You can switch the admin panel to dark mode. When you work inside an event, the admin panel also uses the event's accent color.

Before you start

  • Dark mode applies only to you, in the browser you use. It doesn't change what attendees see.

  • The event's accent color is set in Customization > Branding. Changing it changes the attendee apps too.

Where to find it

  • Dark mode: the moon button in the top bar, on every admin panel page.

  • Accent color: Customization > Branding > Accent color in the event.

Turn dark mode on or off

  1. Select the moon button in the top bar.

  2. To go back to light mode, select the sun button in the same place.

Top bar with the moon button next to Support

The admin panel keeps your choice in this browser. The sign-in page always shows light mode. If the admin panel is in light mode after you sign in, select the moon button again.

An event's Home page in dark mode

How the event's accent color changes the admin panel

Inside an event, the admin panel uses the event's saved accent color for buttons, links, switches, checkboxes, tabs, the selected sidebar item and selected table rows. When you leave the event, for example to go back to the organization, the admin panel returns to its default colors. If the event has no saved accent color, the admin panel keeps its default colors.

Only the accent color changes the admin panel:

  • The Highlight color doesn't.

  • Appearance (Light or Dark) sets the mode attendees see. The admin panel uses your own dark mode choice instead.

Curated and custom colors

The Accent color picker has a row of curated color swatches. The last swatch is Custom color. Teal is the default.

  • Curated color: one of the color swatches. Each curated color has a light and a dark version, so in dark mode the admin panel uses the dark version.

  • Custom color: select the last swatch (Custom color) and pick a color or enter a hex code. The admin panel uses it in the same places as a curated color.

For custom colors, Branding checks whether buttons, text on buttons and links are readable in the mode chosen under Appearance. If a custom color is hard to read, a warning such as Accent color is hard to read in light mode appears under the picker. Save changes stays unavailable until the color passes. Choose another color, or select the button in the warning that names a readable color code, for example Use #1A7F72 instead. Curated colors aren't checked.

Customization then Branding with the Accent color swatches, the Custom color swatch and the selected color label

Change the accent color

  1. In the event, open Customization > Branding.

  2. Under Accent color, select a curated color, or select the last swatch (Custom color) and pick a color.

  3. Select Save changes.

  4. If the event is live, Editing an on-going event opens. Select Apply changes to save.

What attendees see

Dark mode in the admin panel changes nothing for attendees. The accent color appears in the mobile app and the web app on buttons, links, tabs and other calls to action.

Limits

  • Your dark mode choice is saved in this browser only. It doesn't follow you to another browser or computer.

  • The admin panel uses only the event's accent color. You can't set a separate color for the admin panel.

Related articles

Did this answer your question?