Documentation

Unity Cloud

Get Started

Asset Manager SDKs and services

Open Unity Dashboard

Unity Cloud

Enable custom branding

Configure Unity Dashboard to use your company logo and color palette.
Read time 3 minutesLast updated 3 hours 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
If 
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:
  1. Save the boilerplate 
    shared-assets
    ConfigMap     to a file named 
    cm-unity-dashboard-shared-assets.yaml
    .
  2. In the 
    binaryData
    section, replace the base64-encoded values for 
    logo.svg
    , 
    label-logo.svg
    , and 
    favicon.ico
    with your own assets.
  3. 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
    .
  4. Apply the ConfigMap to the 
    asset-solutions
    namespace:     
    kubectl apply -f cm-unity-dashboard-shared-assets.yaml -n asset-solutions
  5. 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:
  1. Open Unity Dashboard in a browser, and confirm that the header logo, sidebar footer logo, and browser tab icon match your assets.
  2. In the upper-right user menu, switch between the Light and Dark themes, and confirm that both themes use your colors.
  3. 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:
  1. Delete the ConfigMap: 
    kubectl delete -f cm-unity-dashboard-shared-assets.yaml -n asset-solutions
  2. 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"            }          }        }      }    }