Enable custom branding

Configure Unity Dashboard to use your company logo and color palette.

Read time 3 minutes

Last updated 2 months ago

Unity Dashboard uses bundled default assets for its logo, favicon, and theme colors. To use your own logo, favicon, and theme colors, deploy a Kubernetes ConfigMap named

shared-assets

to the

asset-solutions

namespace. Front-end pods mount this ConfigMap and load your assets at startup.

For a full list of customizable assets and palette keys, refer to Custom branding reference.

Prepare your branding assets

Before you create the ConfigMap, prepare the assets you want to use:

logo.svg
: Primary logo shown in the application header. Encode the file content as base64.
label-logo.svg
: Compact logo shown in the sidebar footer when the navigation pane is collapsed. Encode the file content as base64.
favicon.ico
: Browser tab icon. Encode the file content as base64.
palette.json
: Color palette for the light and dark themes. For available color keys, refer to Custom branding reference.
overrides.css
: Optional stylesheet for adjusting logo dimensions, spacing, or styling that the palette can't reach. Unity Dashboard loads this stylesheet after the bundled stylesheet, so the rules apply without
```
!important
```
. For the available CSS hooks, refer to Custom branding reference.

If you omit any asset from the ConfigMap, Unity Dashboard uses the bundled default for that item.

Note

palette.json

contains invalid JSON, Unity Dashboard falls back to the bundled default palette without showing an error.

Apply your custom branding

To deploy the ConfigMap to the cluster:

Save the boilerplate

shared-assets

ConfigMap to a file named

cm-unity-dashboard-shared-assets.yaml

In the
```
binaryData
```
section, replace the base64-encoded values for
```
logo.svg
```
,
```
label-logo.svg
```
, and
```
favicon.ico
```
with your own assets.
In the
```
data
```
section, replace the value of
```
palette.json
```
with the color palette for your brand. To adjust logo dimensions, spacing, or other styling, also replace the value of
```
overrides.css
```
.

Apply the ConfigMap to the

asset-solutions

namespace:


kubectl apply -f cm-unity-dashboard-shared-assets.yaml -n asset-solutions

Restart the front-end deployment so the pods pick up the new assets:


kubectl rollout restart deployment/asset-front-end -n asset-solutions

After the front-end pods restart, Unity Dashboard uses the assets from the ConfigMap.

Tip

Back up your ConfigMap file before each change so that you can roll back to a known-good version.

Verify your custom branding

To confirm your branding is active:

Open Unity Dashboard in a browser, and confirm that the header logo, sidebar footer logo, and browser tab icon match your assets.
In the upper-right user menu, switch between the Light and Dark themes, and confirm that both themes use your colors.
After you update
```
palette.json
```
, end users must perform a hard reload (Ctrl+Shift+R or Cmd+Shift+R) to see the new colors. Unity Dashboard caches the palette for one hour after startup.

Revert to the default branding

To restore the bundled default assets:

Delete the ConfigMap:


kubectl delete -f cm-unity-dashboard-shared-assets.yaml -n asset-solutions

Restart the front-end deployment:


kubectl rollout restart deployment/asset-front-end -n asset-solutions

After the front-end pods restart, Unity Dashboard reverts to the bundled default branding.

Boilerplate

shared-assets

ConfigMap

Use the following manifest as a starting point. Replace the placeholder values in the

binaryData

section with the base64-encoded content of your assets. Adjust logo dimensions and spacing in the

overrides.css

section, and replace the

palette.json

body with your own colors. You can also remove any section from the ConfigMap. Unity Dashboard uses the bundled default for any omitted sections.


apiVersion: v1kind: ConfigMapmetadata:  name: shared-assetsbinaryData:  logo.svg: |    <base64-encoded contents of logo.svg>  label-logo.svg: |    <base64-encoded contents of label-logo.svg>  favicon.ico: |    <base64-encoded contents of favicon.ico>data:  overrides.css: |    .vpc-logo {      margin-right: 8px;    }  palette.json: |    {      "colorSchemes": {        "dark": {          "palette": {            "primary": {              "main": "#0A6EC8",              "dark": "#1361AD",              "lighter": "#012348",              "contrastText": "#C6E4FF"            },            "common": {              "black": "#000000",              "white": "#FFFFFF"            },            "divider": "rgba(255, 255, 255, 0.08)",            "dividerElevation0": "#3a3a3a",            "action": {              "hover": "rgba(255, 255, 255, 0.071)",              "selected": "#313131",              "disabled": "#3a3a3a"            },            "error": { "main": "#e5484d" },            "warning": { "main": "#ffc53d" },            "success": { "main": "#30a46c" },            "background": {              "default": "#131313",              "paper": "#191919",              "paperElevation0": "#222222",              "modalElevation": "#2a2a2a",              "datagridHeader": "#222222"            },            "text": {              "primary": "#eeeeee",              "secondary": "#b4b4b4"            },            "grey": {              "50": "#111111",              "100": "#191919",              "200": "#222222",              "300": "#2a2a2a",              "400": "#313131",              "500": "#3a3a3a",              "600": "#484848",              "700": "#606060",              "800": "#6e6e6e",              "900": "#7b7b7b"            }          }        },        "light": {          "palette": {            "primary": {              "main": "#0A6EC8",              "dark": "#0060B8",              "lighter": "#ECF5FF",              "contrastText": "#0E345B"            },            "common": {              "black": "#000000",              "white": "#FFFFFF"            },            "divider": "rgba(0, 0, 0, 0.1)",            "dividerElevation0": "#e8e8e8",            "action": {              "hover": "rgba(0, 0, 0, 0.059)",              "selected": "#e8e8e8",              "disabled": "#e0e0e0"            },            "error": { "main": "#e5484d" },            "warning": { "main": "#ffc53d" },            "success": { "main": "#30a46c" },            "background": {              "default": "#FFFFFF",              "paper": "#fcfcfc",              "paperElevation0": "#f9f9f9",              "modalElevation": "#FFFFFF",              "datagridHeader": "#f9f9f9"            },            "text": {              "primary": "#202020",              "secondary": "#646464"            },            "grey": {              "50": "#fcfcfc",              "100": "#f9f9f9",              "200": "#f0f0f0",              "300": "#e8e8e8",              "400": "#e0e0e0",              "500": "#d9d9d9",              "600": "#cecece",              "700": "#bbbbbb",              "800": "#8d8d8d",              "900": "#838383"            }          }        }      }    }

Documentation

Development

User Acquisition

Monetization

Industry