This article demonstrates how you can create, import and export UI themes in VMware Cloud Director 10.4.1 and later.

You can download my created themes on the bottom of this page.

Introduction

With the 10.4.1 release of Cloud Director (launched on the 8th of December 2022) a new way of branding has been introduced.

In my opinion, this is a major improvement compared to the old way of branding & theming your cloud.
I will cover the following topics in this article.

  • How to enable the new themes plugin.
  • How to create a new theme.
  • How to Import/Export themes.

Enable the new themes plugin

When you logon to the Cloud Director UI, and navigate to More > Customize Portal > Themes you will notice that you need to enable the Branding API first:

A new branding API is available for VMware Cloud Director. You can enable it through the Branding API feature flag under Administration.

Navigate to Administration > Feature Flags > Branding API and choose Enable.

Navigate to Administration > Feature Flags > Branding API and choose Enable

After choosing Enable, the UI informs you if the feature has been enabled succesfully.

Feature "Branding API" has been enabled.

Navigate back to More > Customize Portal > Themes and choose Reload Page to complete the activation of the branding feature.

Reload now

All done! Move to the next section to understand how you can create new themes yourself.

Create a New Cloud Director UI Theme

After the screen has been reloaded, click the Create Theme button and choose a Light-Based or Dark-Based theme.

On the next screen, give your theme a name and change the colors to your liking.
In my example, I am going to build a Marvel / Spiderman theme.

Lucky for me, Color-Hex already had a Spiderman color palette available, so I did not have to search the HEX numbers.

Color-Hex Spiderman Color Palette

When you create a new theme, you can pick your colors, logo, icon and background.
The screenshots below illustrate the process.

  • Theme Name Marvel_Spiderman
  • Header #A71814
  • Header Font #D9E2E7
  • Font #EAEDF0
  • Selection #A71814
  • App Background #1b2a32

Theme Colors

Create theme in VMware Cloud Director

Theme Branding

Add logo, icon and background image to your theme

The steps for adding your logo, icon and background are straightforward.
I would like to highlight the Platform Name field.

The Platform Name field supports a variable: ${TENANT_NAME}

You can use the ${TENANT_NAME} variable to substitute the name of the platform with the name of the VCD Organization Name at runtime.

Using this variable could be usefull if you want to personalize a single theme for all your tenants.
Have a look at the following figures to understand.

I have created ONE theme: Marvel_Spiderman with the variable in the platform name field.

Use the ${TENANT_NAME} variable

Provider View

Logged on as Provider, you will see ‘System’ in the top left corner.

Provider view

Tenant View

Each tenant has an own Organization with Organization Name and Organization Full Name fields populated:

VCD Organization Name & Organization Full Name

When Organization Org-Marc logs on to the platform, they will have their (company) name on the top bar.

Tenant View

Tenant 2 View

But when vBlog-NL logs on to the platform, they will see their (company) name in the top bar.

Tenant View

As a result, you can have custom branding per tenant with a single theme.

Exporting & Importing your theme

If you run a multi-site Cloud Director environment or if you want to have the same look & feel in your Test Environment as you have in your Production Environment, you might want to export your theme and import it on your other Cloud Director environments.

Follow the steps below to export and import themes.

Export

Navigate to More > Customize Portal > Themes and choose Action > Export

A .zip file will be downloaded to your computer, which includes all the logo, icon, background and style documents required for branding.

UI Theme - zip file content

Import

Navigate to More > Customize Portal > Themes, and choose Import

import VCD UI theme

Select the .zip file in the wizard and a few seconds later your theme is imported.

  • To set this theme for the whole platform, choose Action > Make Default
  • To set this theme for a few tenants only, choose Action > Assign and Select the Organizations from the list.
Assign VCD UI theme

VMware Cloud Director Themes Download

You can download and import my VMware Cloud Director themes below:

If you have created a theme which you want to share on this list, ping me on Twitter and I will add your theme to the list.

Loading

By Marc Roeleveld

VCDX-DCV #299 | Cloud Architect | Owner at Roeleveld Cloud Services

Leave a Reply

Your email address will not be published. Required fields are marked *