Configure branding and theme

Branding lives in the same place as the layout — Settings → Knowledge → Design. The settings panel switches between page-level layout config and theme config based on what’s selected. To get to theme, click anywhere on empty canvas to deselect blocks, then look for the Theme or Branding section in the right panel.

What you can configure

• Logo — Uploaded image, used in header — Optional alternate logo for dark mode
• Favicon — Browser tab icon — Same image used in both modes
• Primary color — Buttons, links, accents — Darkened automatically (override available)
• Header background color — Top nav background — Override available
• Text color — Body text — Override available
• Open Graph image — Image used when the help center URL is shared — Same image in both modes

Atender renders both light and dark themes automatically. Customers see the one their browser/OS prefers, with an in-page toggle if you’ve enabled it.

Upload your logo

1. In the Theme panel, click Upload logo.
2. Pick a PNG or SVG. SVG is preferred — it scales cleanly across screen sizes.
3. The logo replaces the default Atender wordmark in the header within a couple of seconds.

The logo also appears on the favicon if you haven’t uploaded a separate favicon.

Dark mode logo

If your logo is dark on a light background and would disappear on a dark header, upload a separate light-on-dark version:

1. Switch the theme preview to Dark (toggle at the top of the panel).
2. Click Upload logo (dark).
3. Upload the alternate version.

The right logo is served automatically based on the customer’s theme.

Set the primary color

The primary color is the strongest accent on your help center — buttons, primary links, search-bar focus states, hover effects.

1. In the Theme panel, click the color swatch next to Primary color.
2. Pick a color — use the picker, paste a hex code, or use one of the preset palettes.
3. The site updates immediately in the preview.

Atender derives the dark-mode primary color from the light-mode value automatically. If the auto-derived color isn’t quite right, override it directly in the Dark theme section.

Set the favicon

1. Click Upload favicon.
2. Pick a square PNG (32×32 or 64×64 is standard) or an ICO file.
3. Save.

Browsers cache favicons aggressively — your customers may need to hard-refresh to see the change.

Set the Open Graph image

The Open Graph image shows when your help center URL is pasted into Slack, Twitter, Facebook, or LinkedIn.

1. Click Upload OG image.
2. Use a 1200×630 pixel JPG or PNG. That ratio renders cleanly on every major social platform.
3. Save.

Most social platforms cache OG images for hours to days. To force a refresh, use the platform’s debugger (Facebook Sharing Debugger, Twitter Card Validator).

Override dark-mode colors

If the auto-derived dark-mode colors don’t match your brand:

1. Toggle the theme preview to Dark.
2. Open the Dark theme section in the panel.
3. Override any of: primary color, header background, text color.
4. Each override has a “Reset to auto” button — use it if you change your mind.

Preview in both modes

The theme panel has a Light / Dark toggle. It’s a preview only — the actual customer experience picks the theme based on the customer’s browser/OS preference.

You can also test the live site by switching your own OS theme and refreshing the public help center.

Save

Save explicitly. The branding changes apply on the next public-site request — usually within seconds.

Reset to defaults

The theme panel has a Reset to defaults action that returns the primary color to Atender’s default teal (#2CACA0) and clears any uploaded logo. Use it as a sanity check if your color choices have drifted into something you can’t trust.