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 slightly desaturated, lifted 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.

How auto-derivation works

When the Dark Primary Color and Dark Accent Color fields are left in auto mode, Atender derives them from your light-mode picks. The derived variants are designed to:

• Stay close enough in hue to feel like the same brand
• Adjust lightness and saturation so they read well against dark backgrounds
• Maintain readable foreground (text) contrast automatically

If that’s good enough, you don’t need to do anything. The fields below the “Dark Mode Colors” header show the derived values as placeholders, and the helper text reads “Auto-generated from your light mode colors.”

Override the dark primary color

1. Open Settings → Look & Feel.
2. Scroll down to the Dark Mode Colors section under Brand Colors.
3. Find Dark Primary Color. Either click the color swatch and pick visually, or type a hex value into the field next to it.
4. As soon as you change the value, the field switches into manual mode — Atender stops auto-deriving and uses your override instead.
5. Use the Preview pane and toggle to Dark to see how your override looks.
6. Click Save Colors when you’re happy.

The override applies anywhere the dark --primary CSS variable is used in the agent UI: buttons, tabs, focus rings, sidebar accents, and so on.

Override the dark accent color

Same flow for the Dark Accent Color (Optional) field directly below the dark primary. If your light-mode accent is blank, the dark accent is also blank by default and there’s nothing to override unless you also set a light-mode accent.

Reset a single override back to auto

Once you’ve manually overridden a dark color, a small Reset to auto link appears in the top-right of that field’s header.

1. Click Reset to auto for either Dark Primary Color or Dark Accent Color.
2. The field flips back into auto mode and the derived value reappears as a placeholder.
3. Click Save Colors 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.

Reset everything back to defaults

If you want to wipe both light and dark customizations:

1. In the Preview pane, click Reset to Defaults.
2. All four color fields (light primary, light accent, dark primary, dark accent) return to defaults. The primary becomes #2CACA0 (Atender teal); accent and dark overrides clear. The reset saves immediately.

Verify it worked

• Toggle the Preview pane to Dark and confirm your override is in use.
• Have a teammate whose system is set to dark mode open the app — they should see the override applied.
• Check the Save Colors toast for “Settings saved.”

Troubleshooting

• Symptom: I clicked “Reset to auto” but the value didn’t seem to change. Fix: The visible color was already very close to the derived value. The change is real — Atender is now auto-deriving instead of using a fixed override — even if the displayed hex looks the same.

• Symptom: My override looks unreadable in dark mode. Fix: Atender picks the foreground (text) color by contrast. If your override is mid-lightness on a dark surface, text contrast can still struggle. Try a slightly lighter shade.

• Symptom: Teammates report the colors are wrong in dark mode but I see them right. Fix: The teammates’ system is probably switching modes at a different time of day (auto-switch on macOS or Windows). Verify by manually toggling your system between light and dark and viewing the app in both states. Both modes should look intentional.

See also

• Customize your brand colors
• What is Look & Feel?