Customize Branding

PaletteAI allows you to customize the appearance of the PaletteAI User Interface (UI) during installation or upgrades. Using Helm chart values, you can customize the following front-end elements:

• Header colors - Background and text colors for the top navigation bar.
• Sidebar colors - Background and text colors for the sidebar navigation.
• Custom logo - Replace the default PaletteAI logo with your organization's logo.

All branding fields are optional. For example, if you only want to customize the logo, you can provide just the logoUrl and leave the other fields empty. For any fields that are missing or contain invalid values, PaletteAI will use the default values.

Prerequisites

• Helm installed.

• kubectl installed and available in your $PATH.

• The KUBECONFIG environment variable set to the path of the PaletteAI hub cluster's kubeconfig file.

  export KUBECONFIG=<kubeconfig-location>

• Access to the PaletteAI values.yaml Helm chart.

• A text editor to modify the PaletteAI values.yaml Helm chart.

• For custom logos, a publicly accessible image URL (HTTPS recommended).

Enablement

1. Open your PaletteAI values.yaml file in a text editor of your choice. Locate the canvas.branding section. Modify the existing values, as desired.

   canvas:
     branding:
       brandColor: ''
       headerBackgroundColor: ''
       sidebarBackgroundColor: ''
       logoUrl: ''

   The following table describes the fields in additional detail. All fields are optional.

   Field	Description	Default
   brandColor	Primary brand color; drives the brand-bold token (buttons, links, etc.).	`` (empty)
   headerBackgroundColor	Background color for the header. Text color is derived for contrast.	``
   sidebarBackgroundColor	Background color for the sidebar navigation. Text color is derived for contrast.	``
   logoUrl	URL to custom logo image (HTTP/HTTPS only). Supported formats include PNG, SVG, JPG, and WebP. The URL must be accessible from the Canvas pods (i.e., not behind authentication). Logos will be scaled to 200px width and 40px height.	`` (empty)

   tip

   Colors can be specified in the following formats:

   • Hex colors (#FFFFFF, #FFF)
   • RGB (rgb(255, 255, 255))
   • RGBA (rgba(255, 255, 255, 0.8))

2. Apply your changes by upgrading your PaletteAI installation.

   helm upgrade paletteai spectrocloud/paletteai \
     --namespace mural-system \
     --values values.yaml

Validate

1. Check that the ConfigMap was created successfully.

   kubectl get configmap branding --namespace mural-system

2. View the ConfigMap contents. Check that the ConfigMap was populated with the correct values.

   kubectl describe configmap branding --namespace mural-system

3. Log in to PaletteAI to verify the UI reflects the values defined in the ConfigMap. If the UI is not using the expected colors or logo, check the Canvas pod logs for any branding-related errors.

   kubectl logs deployment/canvas --namespace mural-system | grep --ignore-case brand