Configuring Brand Colour in Clients

Note, this feature will be available starting from Element Pro version 25.11.0.

Element Pro includes basic support for branding the app based upon the server used. This can be configured in your ESS Pro deployment by configuring the well-known delegation "component":

wellKnownDelegation:
  additional:
    element: |
      {
        "brand_color": "#A40FBF"
      }

Or if you're hosting your well-known files separately, create the file .well-known/element/element.json with this configuration.

{
  "element": {
    "brand_color": "#A40FBF"
  }
}

In the example above, a brand colour of #A40FBF is set. This will be used by Element Pro as the base colour to generate a complete custom theme for your users (with support for light/dark mode and high-contrast). The theme generation uses our Compound design system and optimises for accessibility throughout the app – therefore it is worth noting that whilst a generated theme will contain multiple shades of the specified brand colour, the exact value might not be directly visible.

The colour must be specified as an RGB hex code (six hex digits, case‑insensitive and prefixed with a #). When omitted, Element Pro will continue to use the default theme.

There is an example fragment in charts/matrix-stack/ci/fragments/element-pro-brand-color.yaml for further reference.

Supported Platforms

Android	iOS	Web
✅	✅	❌