> ## 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).

# Set your workspace appearance

Your client portal should look like your business, not like software you rent. With Appearance you choose from 240 ready-made looks or build your own: colours, a gradient or photo background, glass-like surfaces, fonts, the sidebar, the frame around the portal, and light and dark mode. Your clients see a portal that feels like yours, and your team works in the same look. You set it on **Settings › Brand › Appearance**, and you can give individual clients a theme of their own.

## Set the look for everybody

![The numbers match the steps below.](https://getzendo.io/wp-content/uploads/2026/11/kb-p2-appearance-overview.webp =800x470)

1. Open **Settings › Brand › Appearance**.
2. Select **Choose a theme preset** at the top of the page and pick a starting point. There are 60 colour palettes, for example **Admiral**, **Indigo** or **Violet Rings**, and each comes in four styles: **Solid**, **Gradient**, **Photo** and **Layered**.
3. On the **General** tab, under **Color mode**, decide whether to **Allow clients to switch between light and dark mode**, and choose the **Default mode**: **Light** or **Dark**.
4. Under **Typography**, choose the **Font family** and the **Font size**. The size is chosen on a scale rather than typed in as a number.
5. On **Light**, set the colours and the background for light mode. The **Accent color** is the colour of the main buttons, so it is the colour your clients will see as your brand colour.
6. If the sidebar should have its own colours or a background image, turn on **Use custom sidebar styling** under **Sidebar**. This lets the sidebar show a photograph, for example, while the rest of the client portal stays plain.
7. On **Dark**, set up dark mode in the same way.
8. Check the result in **Live preview**, then select **Save**.

Every setting on the three tabs, from the page surface and portal frame to the top bar, controls, dialogs and contrast, is explained in [Every appearance setting, explained](https://help.getzendo.io/en/article/every-appearance-setting-explained-1nwos1n/).

![Theme presets can be filtered by style and by palette group: Neutral, Cool or Warm.](https://getzendo.io/wp-content/uploads/2026/11/kb-p2-theme-presets.webp =750x501)

![On the Light tab, the Accent color is the colour of the main buttons.](https://getzendo.io/wp-content/uploads/2026/11/kb-p2-light-accent.webp =800x308)

![With Live preview on, a change to the sidebar colours shows straight away in the sidebar on the left.](https://getzendo.io/wp-content/uploads/2026/11/kb-p2-sidebar-styling.webp =800x290)

## A look in minutes, refined in detail

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

Most workspaces get a polished portal by picking a preset, changing the **Accent color** to their brand colour and uploading a logo. If you want more, every part of the portal can be tuned: a photo behind a translucent page, a sidebar with its own background image, rounder corners and a shadow around the portal, serif headings for an editorial feel, or higher contrast for clients who need it. Because the settings live in one place, the look stays consistent on every page your clients open.

## Why both modes need setting up

The **Default mode** is what a client sees until they choose a mode themselves. If **Allow clients to switch between light and dark mode** is off, clients always see the mode you chose. If it is on, a client who switches sees the other mode.

Anyone on your team who uses the light and dark switch in the top bar also sees the other mode. So even if you expect everyone to use one mode, it is worth setting up both **Light** and **Dark**.

## Your team sees the same look as your clients

There is no separate look for your team, and no look per role. What you can change per role is what people can open, through the sidebar and the dashboard. See [Change your team's sidebar](https://help.getzendo.io/en/article/change-your-teams-sidebar-1n7llbp/).

## Giving some clients a different look

On **Settings › Brand › Client themes**, you can give one client or one client team a different look. A theme stores only the sections you override; everything else comes from **Appearance**, including changes you make later.

A client theme cannot change the two **Color mode** settings: whether clients can switch between light and dark mode, and which mode they see by default. Both are set once for the whole workspace, as described in step 3 above. See [Create a client theme](https://help.getzendo.io/en/article/create-a-client-theme-u3u3fz/).

## Logos and your own code

The logo, the **Dark mode logo**, the favicon and the app icon are uploaded 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/).

For anything these settings cannot do, you can add your own CSS and JavaScript, up to 50,000 characters each, under **Custom code** on **Settings › Workspace › Integrations**. Zendo loads your code on every page of the client portal and applies your styles after its own. See [Add your own CSS and JavaScript](https://help.getzendo.io/en/article/add-your-own-css-and-javascript-1k6wg7c/).

## Related

- [Every appearance setting, explained](https://help.getzendo.io/en/article/every-appearance-setting-explained-1nwos1n/)
- [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/)
- [Show different things to different clients](https://help.getzendo.io/en/article/show-different-things-to-different-clients-td4yka/)
- [Change your team's sidebar](https://help.getzendo.io/en/article/change-your-teams-sidebar-1n7llbp/)
- [Add your own CSS and JavaScript](https://help.getzendo.io/en/article/add-your-own-css-and-javascript-1k6wg7c/)