[UI Feature] Add CSS customization option for optional visual indicator with accent color to distinguish separate deployments

[gpgn]

Motivation: Why do you think this is important?

As adoption of Flyte in our org grows, teams have one or multiple deployments of Flyte (for example, to separate dev, staging, prod) which may contain very similar projects and workflows making the UI near indistinguishable. We want to support our users and administrators to easily be able to identify at first glance in which environment they are operating, reducing cognitive load. Currently, we are doing this through a CSS workaround which adds a colored banner, but it would be great if this could be provided as a feature directly.

Goal: What should the final outcome look like, ideally?

Since the sidebar is always present, it provides an ideal location to include a noticeable border in an accent color.

Above: Example of a possible implementation (our current usage to distinguish production, staging, and development environments).

An alternative/extension could involve providing the possibility of adding a name for the deployment as well, which would be shown in the accent color. This option is more visually cluttered however, and less visible if not combined with the vertical bar.

Other alternatives could include allowing the Flyte logo and/or "Flyte" text at the top of the sidear to be colored as well, but as this impacts the branding I've not included it a serious option.

This would be set as flyteconsole.sidebarAccentColor: #ffffff in the Helm chart, picked up as SIDEBAR_ACCENT_COLOR in flyteconsole (optionally with ENABLE_SIDEBAR_ACCENT_COLOR, or similar). I could work on an initial PR if this finds traction.

Propose: Link/Inline OR Additional context

No response

Are you sure this issue hasn't been raised already?

• Yes

Have you read the Code of Conduct?

• Yes

[runllm]

Currently, there is no built-in method to customize the Flyte admin's CSS directly from the configuration to distinguish between different deployments visually, such as changing the sidebar color or adding a deployment name in the UI. This feature is not supported as per the existing discussions on the Flyte community platform. You may need to continue using CSS workarounds or consider contributing to the project by developing this feature. Would you like more details on how to contribute to Flyte or other potential solutions within the current capabilities?

Sources:

• Flyte community discussion on CSS customization

---

This is an AI-generated response and your feedback is appreciated! Please leave a 👍 if this is helpful and 👎 if it is not.

Mention @RunLLM to ask follow-up questions. See runllm.com for more!