# Enable custom branding

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

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](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](custom-branding-reference#theme-palette-structure).
* **`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](custom-branding-reference#css-overrides).

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](#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:

   ```text
   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:

   ```text
   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:

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

2. Restart the front-end deployment:

   ```text
   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.

```yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: shared-assets
binaryData:
  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"
            }
          }
        }
      }
    }
```
