> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.getzendo.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Every appearance setting, explained

Zendo lets you design the whole client portal, not just swap a logo: the colours, the background behind everything, the surfaces your clients read on, the frame around the portal, the sidebar, the top bar, the buttons and fields, the dialogs, and the contrast between them, separately for light and dark mode. This article goes through every setting on **Settings › Brand › Appearance**, section by section. A client theme uses exactly the same settings, so everything here also applies to [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/).

![A Photo preset: a photograph behind the portal, with translucent surfaces and a glass-like sidebar on top.](https://getzendo.io/wp-content/uploads/2026/11/kb-p14-hero.webp =729x474)

## Start from a preset

**Choose a theme preset**, at the top of the page, opens a gallery of 60 colour palettes, each in four styles, so 240 complete looks in all:

| Style | What it looks like |
|---|---|
| **Solid** | Flat, calm colours. The portal looks like a tidy business tool. |
| **Gradient** | A soft colour gradient behind the portal. |
| **Photo** | A photograph behind the portal, with translucent surfaces on top. |
| **Layered** | Image and colour layers combined, for the most distinctive look. |

Filter the gallery by **Styles** and by **Palette**: **Neutral**, **Cool** or **Warm**. **Most popular** at the top is a good place to start. The moon icon shows every preset in dark mode before you pick it. A preset fills in all the settings below, and you can then change any of them.

![Theme presets: the most popular looks, filters by style (2) and palette (3), and each palette in four styles.](https://getzendo.io/wp-content/uploads/2026/11/kb-p14-presets.webp =756x459)

## General

**Color mode**

- **Allow clients to switch between light and dark mode** — gives clients the light and dark switch in their top bar.
- **Default mode** — **Light** or **Dark**, used when a client has not chosen a mode themselves.

**Typography**

- **Font family** — DM Sans, Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Work Sans, Source Sans 3, Merriweather or Playfair Display. Merriweather and Playfair Display are serif fonts, for an editorial look; the rest are clean sans-serif fonts.
- **Font size** — **Small**, **Default** or **Large**, for the whole portal.

## Light and Dark

The **Light** and **Dark** tabs have the same sections. Your team and every client who switches mode will see the other one, so dark mode needs a look too, but you do not have to build it by hand.

### Dark mode from light

The **Dark** tab starts with **Generate dark mode from light**. With it on, Zendo works out the whole dark look from your light one, and dark mode follows every change you make on the **Light** tab. Turn it off when you want to fine-tune dark mode yourself: the fields are filled with the generated values, and you change them from there. Most workspaces can leave it on; turn it off when, for example, your brand has a dark version with its own accent colour.

![The Dark tab starts with Generate dark mode from light. Off, the dark fields below are yours to set.](https://getzendo.io/wp-content/uploads/2026/11/kb-p14-dark-mode.webp =564x370)

### Accent color

The colour of primary buttons, highlights and other accent elements: the colour your clients will remember as yours. Pick one of eleven tuned colours, from **Charcoal** and **Iris** to **Plum** and **Gold**, or enter your brand colour in **Custom color**.

### Links

**Link color** gives links their own colour, independent of the accent colour. The arrows next to it set the link colour back to one that matches your accent.

### Background

The background behind the entire portal, visible through any surface that is not fully opaque.

- **Type** — **Solid** for a colour, or **Image** for a picture of your own.
- **Color** — for a solid background, the colour. Leave it empty to use the default.
- **Image** — for an image background, upload a large, high-resolution picture. Add an **Overlay color** with an **Opacity**, and a **Blur**, to tint or soften the picture so text on top stays easy to read. Set the opacity to 0 to leave the picture as it is.
- **Gradient overlay** — lays a soft gradient over the background. Choose the **Gradient type**, **Blobs** or **Circles**, and two **Gradient colors**.

### Page surface

The surface the content sits on: cards, panels and lists.

- **Background color**, **Opacity** and **Text color**. Cards take this colour exactly; on a near-white page, the space beneath the cards is a step darker, so the cards stand out. Lower the **Opacity** to let the background show through, for a glass-like look.
- **Advanced** — every shade below is generated from the text colour and the contrast. Set one to use an exact colour instead, or clear it to generate it again.
  - **Content depth** — how much the content area differs from the header strip. At 0% they share the same shade.
  - **Neutral fills** — four grey fills with their own opacity: **Subtle** for header strips, **Default** for striped rows, **Strong** for info boxes and **Bold** for grey chips.
  - **Avatars** — the background of an avatar without a picture.
  - **Scrollbar** — the **Handle** and the **Track** of every scrolling list.

![The accent colour with eleven tuned presets, the link colour, and an image background with overlay and blur.](https://getzendo.io/wp-content/uploads/2026/11/kb-p14-accent-background.webp =582x583)

### Portal frame

The border and outer styling around the whole portal: the border **Color**, **Opacity** and **Width**, a **Shadow**, and the **Corner radius**. Rounder corners and a shadow make the portal look like a floating app window; a square frame without a shadow makes it look like a classic web page.

### Sidebar

By default the sidebar takes the page surface. Turn on **Use custom sidebar styling** to give it its own look:

- **Background color**, **Opacity** and **Text color**.
- **Sidebar background image** — a picture behind the sidebar. The recommended size is 720 × 1350 px.
- **Advanced** — the colours of headings and dividers, of default items (icon and arrow), of items under the cursor (background, text, icon and arrow), and of the selected item (background, text and icon), each with its own opacity. They are generated from the sidebar text colour and the contrast until you set one.

![Custom sidebar styling: its own colours, a background image, and Advanced colours for every state of an item.](https://getzendo.io/wp-content/uploads/2026/11/kb-p14-sidebar.webp =556x456)

### Top bar

The top bar is transparent, so you choose the colour of its icons and text: **Automatic** picks the best contrast, **Match sidebar** and **Match page** follow those colours, and **Custom** lets you set one.

### Controls

Fields, cards, buttons and other things people click on. For **Control background** and **Control text color**, **Inherit** takes the surface the control sits on, **Automatic** sets the control a step apart from it, and **Custom** uses your colour.

### Dialogs and menus

Dialogs, menus and pop-ups that open over the page, with the same three choices for **Dialog background** and **Dialog text color**. **Preview a dialog** shows one with your settings.

### Contrast

**Low**, **Default** or **High** sets the strength of borders, dividers and hover states. The text itself does not change. **High** helps people who find faint lines hard to see.

![Dialogs and menus with their own background, Preview a dialog, and the three contrast levels.](https://getzendo.io/wp-content/uploads/2026/11/kb-p14-dialogs-contrast.webp =578x445)

## See every change before you save it

With **Live preview** on, the settings pages themselves take on the look as you change it: the sidebar, the surfaces and the buttons around the form show the result straight away. Nothing changes for your team or your clients until you select **Save**. To see the result on a real client's account, use **View as client**. See [View the portal as a client](https://help.getzendo.io/en/article/view-the-portal-as-a-client-8xh4sc/).

## What else shapes the look

- **Logos, favicon and app icon** are on **Settings › Brand › Identity**. See [Put your logo, favicon and app icon in place](https://help.getzendo.io/en/article/put-your-logo-favicon-and-app-icon-in-place-1sy8a1l/).
- **The sign-up and login pages** have their own settings on **Settings › Brand › Sign-up & login**. See [Set up the sign-up and login pages](https://help.getzendo.io/en/article/set-up-the-sign-up-and-login-pages-4two6e/).
- **A different look for one client or client team** is a client theme. See [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/).
- **Anything beyond these settings** can be done with your own CSS. See [Add your own CSS and JavaScript](https://help.getzendo.io/en/article/add-your-own-css-and-javascript-1k6wg7c/).

## Related

- [Set your workspace appearance](https://help.getzendo.io/en/article/set-your-workspace-appearance-wobsc5/)
- [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/)
- [Put your logo, favicon and app icon in place](https://help.getzendo.io/en/article/put-your-logo-favicon-and-app-icon-in-place-1sy8a1l/)
- [Set up the sign-up and login pages](https://help.getzendo.io/en/article/set-up-the-sign-up-and-login-pages-4two6e/)
- [Add your own CSS and JavaScript](https://help.getzendo.io/en/article/add-your-own-css-and-javascript-1k6wg7c/)