# Theme configurations

> A theme holds the colors and layout choices that a branded portal displays in Cloud Management Platform (CMP)

---

Site [llms.txt](/llms.txt)

---

Themes live at **Admin** > **Theme Configurations**, where you can add a new theme or clone an existing one to start. Each portal has a **Default Theme** and can also have an **Alternate Theme**, and a single theme can serve multiple portals.

![Screenshot of the Theme Configurations page.](/img/cmp/configure/administration/system/theme-configurations/theme-configurations.png)

## Theme settings

Open a theme and edit it to set its name and layout.

| Setting | Description |
| --- | --- |
| **Name** | Identifies the theme when you assign it to a portal. |
| **Navigation Placement** | Whether the main navigation is a horizontal bar across the top or a collapsible sidebar on the left. New themes default to the top. CloudBolt Light and CloudBolt Dark use the left. Users can override this on their profile. |
| **Login Layout** | Whether the login and other authentication pages use the full-page form (the default) or a centered card. |
| **Dark Mode** | Marks this as a dark theme. A dark theme starts from a dark color palette, and CMP switches the code editor, syntax highlighting, charts, and status colors to their dark variants. Dark themes show a moon icon on the Theme Configurations list. |

<div class="alert alert-info" role="alert">


**Dark Mode sets the defaults; it does not repaint a theme.** To move an existing theme onto the dark palette, select Dark Mode, then select **Reset all colors to defaults** on the color forms.
</div>


## Light and dark mode for users

To let users choose between light and dark mode, give the portal an **Alternate Theme** in the opposite mode to its **Default Theme**. See [Branded portals](/docs/cmp/configure/administration/system/branded-portals/). The out-of-the-box CloudBolt portal pairs CloudBolt Light with CloudBolt Dark.

Users then switch with the **Dark Mode** toggle in the user menu or on their user profile, and the choice is saved to their account. Users who have not chosen a theme, and pages shown before login, use the Default Theme. If the Alternate Theme is removed, everyone sees the Default Theme.

Users can also set **Navigation Placement** to **Top** or **Left** when they edit their profile, whether or not the portal has an Alternate Theme. Their choice overrides the theme's setting.

## Basic colors

Set these colors first. Enter each one in hex, such as `#000000`, or pick it from the color square.

| Color | What it colors |
| --- | --- |
| **Primary** | The main brand color. Drives buttons, links, active tabs, pagination, and other call-to-action elements. |
| **Highlight** | Marks something as needing attention, such as the setup wizard's Continue setup pill. This is not an error color. |
| **Banner Background** | The band above the top menu, behind the portal's banner image. |
| **Top Menu - Background**, **Top Menu - Text** | The top menu bar and its text. |
| **Page Background** | The main page area, behind the cards and panels. |
| **Surface (Cards & Panels)** | Cards, panels, tab panes, and other surfaces that sit on the page background. |
| **Content Text**, **Heading Text** | Body text and headings. |
| **Tooltip Background**, **Tooltip Text** | Tooltips. |

The basic form also includes an **Update Advanced Colors** checkbox. Select it to recalculate the advanced colors from the basic ones, discarding any previously set values.

Each color form also has a **Reset all colors to defaults** button, which clears every color on that form so it falls back to the theme's palette.

## Advanced colors

Each of these is derived from one of the basic colors. Leave one empty to keep it derived; fill it in to override it.

| Color | What it colors | Derived from |
| --- | --- | --- |
| **Top Menu - Hover**, **Top Menu - Active** | A top menu item under the pointer, and the one for the page you are on. | Top Menu - Background |
| **Security Background** | The security message, if one is set in [Miscellaneous settings](/docs/cmp/configure/administration/system/miscellaneous-settings/). | Page Background |
| **Security Text** | The text of that security message. | Content Text |
| **Email Background** | The background of [emails](/docs/cmp/configure/administration/system/email/templates/) sent in this portal's context. | Top Menu - Background |

The theme's detail page includes a **Preview** panel that shows a CMP catalog page and updates as you change the theme.

## Clone or delete a theme

Cloning copies a theme's settings under a new name.

You can delete a theme once no portal uses it as its Default Theme or Alternate Theme. Reassign those portals to another theme first.

## Related

- [Branded portals](/docs/cmp/configure/administration/system/branded-portals/): Configure the domains, logins, images, and splash screen.
- [Email templates](/docs/cmp/configure/administration/system/email/templates/): How portal and theme branding reach the emails CMP sends.