Fine-tune dark-mode colors

When you set a primary or accent color in Look & Feel, Atender automatically derives a matching dark-mode variant — usually a lifted, less saturated shade that reads well on dark backgrounds. Most of the time that’s fine. If the derived shade doesn’t match your brand, you can override the dark variants manually.

Before you start

• You’ve already picked a primary (and optionally an accent) color. See Customize your brand colors.
• Your brand has a specific dark-mode color you want to use, in hex form.
• You need the Look & feel settings permission. Everything on this page saves for the whole workspace, not just for you.

Where the dark fields live

There is no separate “dark mode” page or section. The Brand colors card on Settings → Look & Feel holds four color rows in one list, with a hairline rule separating the light pair from the dark pair:

• Primary color — Buttons, highlights and selected tabs, in light mode
• Accent color (optional) — Unread and attention marks, in light mode
• Dark primary color — The same primary surfaces, when the app is in dark mode
• Dark accent color (optional) — The same marks, when the app is in dark mode

Dark link color is a fifth thing and lives in its own Link color card further down the page — see How to set a custom link color.

Each row is a color swatch plus a hex box, with a contrast reading underneath.

How auto-derivation works

When you have never typed into Dark primary color or Dark accent color (optional), the field is in auto mode: Atender fills it from your light-mode pick and keeps it in sync as you edit the light color. The derivation:

• Keeps your hue exactly, and caps saturation at 80% so a neon light-mode pick doesn’t glare in dark mode.
• Treats a dark, low-chroma near-grey as a grey — saturation is dropped to at most 4% — so the dark-mode result stays neutral instead of blooming into a hue you never see in light mode.
• Lifts lightness into a dark-mode band: 58% for a light color, 60% for a mid one, 65% for a dark one.
• Then steps lightness up until the result clears 4.5:1 against the dark canvas.

For example, the ink color #171921 auto-derives to #a2a4a9 — a grey, not a blue or a lavender. That’s expected: Atender is preserving the neutral feel of the color instead of forcing a hue that would read as a different brand color.

Atender also picks the text color that sits on top of your color for you, choosing black or white by whichever has more contrast. That choice is not editable.

Auto mode is not a blank field: the derived hex is written into the box as its actual value, and the Dark primary color row’s helper text reads “Auto-generated from your light mode color.” That sentence disappears once the field is manual. (Dark accent color (optional) has no such helper text — its description always reads “Mark color used when the app is in dark mode.”)

Override the dark primary color

1. Open Settings → Look & Feel.
2. Scroll to the Brand colors card and find Dark primary color, below the hairline rule under the light-mode rows.
3. Either click the color swatch and pick visually, or type a hex value into the box next to it.
4. As soon as you touch the value — even a partial hex — the field switches into manual mode. Atender stops auto-deriving and the “Auto-generated…” helper text goes away.
5. Use the Preview block and click Dark to see how your override looks.
6. Click Save changes at the top right of the page.

The override drives the dark-mode value of --primary and everything computed from it: primary buttons and badges, selected tabs, the sidebar highlight, hover and pressed shades, the first chart series, and the on-color text. The focus ring is derived from it rather than copied — it is walked away from the page color until it clears 3:1 — so a very dark or very pale override can produce a ring that isn’t your exact hex.

If you have no accent color set, the dark primary also supplies the unread/attention mark color in dark mode.

Override the dark accent color

Same flow for the Dark accent color (optional) row directly below the dark primary. It colors marks — unread dots, attention indicators — never a surface behind body text, so its contrast reading is held to 3:1 rather than 4.5:1.

You can set a dark accent even if your light-mode accent is blank; it is stored and used independently. Note that the Preview block does not render marks, so a dark accent change is not visible there — switch the app itself to dark mode to check it.

Reset a single override back to auto

Once a dark field is in manual mode, a small Reset to auto link appears underneath it, below the contrast reading.

1. Click Reset to auto under Dark primary color or Dark accent color (optional).
2. The field goes back to auto mode and the derived hex is written into the box.
3. Click Save changes to persist.

You can reset the primary and accent overrides independently — for example, keep a manual dark primary but let the accent stay auto-derived.

Read the contrast note

Under each color box, Atender shows the measured contrast, for example 4.8:1 on button text — readable, or 2.7:1 on button text — too low, needs 4.5:1 in red when it falls short. The dark primary is measured against the text color Atender will paint on it; the dark accent is measured against the worst of the three dark page surfaces a mark can land on.

The note reports, it does not block. A failing color still saves.

Reset everything back to defaults

If you want to wipe both light and dark customizations:

1. In the Brand colors card, in the Preview header row to the right of the Light/Dark toggle, click Reset to defaults.
2. All six colors clear at once: primary, accent, dark primary, dark accent, and — if you had one — the link color and dark link color, with Set link color separately switching back off.
3. Your workspace goes back to having no brand color at all, so the app falls back to the shipped ink identity — #171921 in light mode, #f5f5f2 in dark. The primary hex box reseeds to #171921.

The reset saves immediately; you don’t have to click Save changes afterwards. There is no confirmation prompt, and your workspace logo is not touched.

Verify it worked

• Click Dark in the Preview block and confirm your dark primary is in use. The preview always paints Atender’s own neutral surfaces behind it — those are not customizable — so what you see is the real contrast the app ships.
• Switch the app itself to dark mode from your profile menu (Dark Mode) and look at a real screen. This is the only way to check a dark accent, which the preview doesn’t render.
• On save, a green check animates over the Save changes button. There is no success toast.

Troubleshooting

• Symptom: I clicked “Reset to auto” but the value didn’t seem to change. Fix: Your override was already at (or very near) the derived value, so the hex written back looks the same. The change is real — Atender is now auto-deriving, so the field will follow your light-mode color the next time you edit it.

• Symptom: I changed the dark primary and nothing in the app changed. Fix: The app is in light mode. Dark overrides only take effect when the app is in dark mode; outside of that, only the Preview block’s Dark tab shows them.

• Symptom: My override looks unreadable in dark mode. Fix: Check the contrast note under the field. Atender picks the text color on top of your fill by contrast, but a mid-lightness fill can still leave both black and white text short of 4.5:1. Try a clearly lighter or clearly darker shade.

• Symptom: Save says “A color is incomplete”. Fix: One of the six color boxes holds a partial hex like #17. Atender’s server drops anything that is not a full six-digit hex, so the save is refused rather than half-applied. Complete the value — for example #0B5CFF — and save again.

• Symptom: Teammates report the colors are wrong in dark mode but I see them right. Fix: Dark mode is a per-person setting, not a workspace one. Each teammate toggles it themselves from their profile menu, it is remembered in that browser only, and it does not follow the operating system’s dark-mode setting. New users start in light mode. Ask them to switch to Dark Mode in their profile menu and look again.

See also

• Customize your brand colors
• How to set a custom link color
• What is Look & Feel?