VMware Cloud Director – Tenant Themes

Example Themes: https://github.com/somanyclouds/VCD/tree/main/Theme

The ability to customise the VCD portal has been available in the platform for a long time, but this was done using API calls which could be a little fiddly and time consuming and not very user friendly. VCD 10.4.1 introduced a new UI for the Branding API and added some additional features like the ability to import and export the themes which allows you to make multiple changes to the look and feel of the portal for a single of multiple tenants at the same time.

The branding UI is not enabled automatically. To enable it you need to toggle “Branding API” in the Feature Flags window. Administration > Feature Flags > Branding API. This will now show the UI content in the Themes tab under the Customise Portal section.

Note: There is an extra step that is often missed, if you do not run the below command on the cell servers the custom tenant login screen theme will not show and all tenants will still use the default login screen. Using the cell management tool located in /opt/vmware/vcloud-director/bin folder.

cell-management-tool manage-config -n backend.branding.requireAuthForBranding -v false 

Themes:

The Theme configuration is pretty intuitive, there are 3 sections Colour, Branding and Links each of these have different sub sections. You get 2 default themes a dark mode and a light mode these cannot be edited and the quickest way to get started on a new theme is to clone one of these and make your changes. Colours is where you set all he different colours settings from the header to the text and mouse over effect, the Branding is where you make changes to the login images, the fav icon and the image in the header. The last section Links allows you to create menu sections and web links on different pages e.g. login and log out pages, this can be useful if you need to direct them to a password reset wiki page or a log ticket page.

Using Variables:

There are some places in the theme config where you can use variables e.g. you can use ${TENANT_NAME} in the branding section which will substituted the actual tenant name at runtime . This will display the name in multiple places like the login screen and in the header so in the event that you update the tenant name in some way this will auto update or if you use the same branding across multiple tenants it will display the correct tenant name.

Import/Export

There is an Import and export function which allows you to save themes and also move them between VCD instances e.g. Pre Prod to Prod. The import function is at the top and export is per theme.

I have created a couple of basic theme which can be downloaded here. Also see my terraform script post which matches the Org’s.