Dark mode

Tender can show its pages in dark colours to people who prefer a dark screen. There are two switches: each person picks light or dark for themselves, and your site decides whether its public pages may follow that choice.

Light	Dark

Your own setting

Everyone with an account, staff and customers alike, chooses for themselves:

1. Click your name at the top of any page of your site, then Account settings.
   
2. Under Appearance, pick one:
   
   • Automatic (match my system): follows your computer's or phone's light or dark setting. This is the default, and it's what visitors who aren't logged in get.
   • Light: always light.
   • Dark: always dark.
3. Click Save changes.

The choice applies to the support dashboard straight away. On your site's public pages it applies only if the site allows dark mode (below); if it doesn't, the page says "This support site is always shown light" under the menu.

Allowing dark mode on your site

Your site's public pages (home page, discussions, knowledge base) can only go dark if you allow it, because CSS written for a light page can be hard to read on a dark one.

1. Go to Account & Settings › Settings and click Appearance & Text in the sidebar.
   
2. Under Dark Mode, tick Allow dark mode (or untick it to keep the site light for everyone).
   
3. Click Save your changes.

Until you save this box yourself, Tender decides for you: dark mode is allowed while your site has Tender's own look, and off once you've picked a colour theme or added custom CSS, custom JavaScript or a custom HTML header. After you've saved it, your choice stays, even if you add custom CSS later.

Dark mode works on the modern design. Sites on the classic design are always shown light to visitors (the dashboard can still be dark). See Your site's design.

What changes in dark mode

• Backgrounds, text, borders and links switch to dark-mode colours.
• Your brand colour (the bar across the top of the page, and buttons) stays the same, so your site still looks like yours.
• Other colours from a colour theme (page, card and text colours) are used in light mode only.
• A banner image at the top of the page is shown as it is.

A logo for dark mode

A logo drawn for a white background can disappear on a dark page. You can upload a second version for dark mode:

1. Go to Account & Settings › Settings › Appearance & Text.
   
2. Under Your logo for dark mode, choose a file (or paste an image URL).
   
3. Click Save your changes.

Tender then shows the dark-mode logo whenever the page is dark, and your usual logo otherwise. If you don't upload one, your usual logo is used in both. More on logos in Adding a graphic or logo to your Tender site header.

Custom CSS and dark mode

If you have custom CSS and want to allow dark mode, check your pages in both. The easiest way to keep them readable is to use Tender's colour variables rather than fixed colours, since those switch automatically:

.my-notice {
  background: var(--tn-surface);
  color: var(--tn-ink);
  border: 1px solid var(--tn-border);
}

For rules that should only apply in dark mode, write them twice, once for people whose device is set to dark and once for people who chose Dark:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .my-notice { background: #1f2a36; }
}
:root[data-theme=dark] .my-notice { background: #1f2a36; }

See Styling your install with custom CSS for the variables you can use.