Add appearance configuration per cluster

[alexmathieu22]

Summary

This PR adds accent colors / logo / warning message for each cluster by adding an "Appearance" section in the settings of the clusters. The color change was kept to a minimum as to not disrupt the design, but let us modify it further when a more elaborate design is approved by board. The warning message is optional and it's color is the accent color decided by user. Finally, the icon is currently an icon from the iconify library. This choice was made to kept the change as small as possible, and to use an already used library.

Related Issue

Fixes #15

Changes

• Added accent color by cluster
• Added warning message by cluster
• Added icon by cluster

Steps to Test

1. Navigate to cluster settings
2. Modify appearance as wanted
3. Click on apply
4. Confirm
5. Verify change is persisted for cluster only and looks as required

Screenshots (if applicable)

Screen.Recording.2026-01-04.at.6.23.39.PM.mov

Notes for the Reviewer

• I updated i18n en/fr, but it is my first contribution so unsure where to go from there, it might need review.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: alexmathieu22
Once this PR has been reviewed and has the lgtm label, please assign yolossn for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[skoeva]

Just want to point out the CI failure is likely due to translations that need to be updated; run make i18n locally to update them

[alexmathieu22]

Was wondering if that was what I had to do, thanks for clarifying @skoeva !

[yolossn]

I think it will be a good addition to provide a way for the admins to configure the values for the main cluster from command line or env for incluster deployment.

[yolossn]

Thanks for the contribution, the current state looks good.
There are few changes unrelated to this PR please remove them.

[Copilot]

Pull request overview

This PR adds cluster-specific appearance configuration, allowing administrators to customize the accent color, icon, and warning banner message for each cluster in Headlamp. These settings are stored in the kubeconfig file's extensions and shared across all users of a Headlamp instance.

Key Changes:

• Added ClusterAppearance type with accentColor, warningBannerText, and icon fields
• Updated backend to support storing appearance data in kubeconfig extensions via the cluster update API
• Implemented UI in cluster settings for configuring appearance with validation for color formats

Reviewed changes

Copilot reviewed 28 out of 28 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
backend/cmd/cluster.go	Added ClusterAppearance struct and updated ClusterUpdateRequest to include appearance field
backend/cmd/headlamp.go	Refactored cluster rename handler to updateCluster to support both rename and appearance updates, added logic to update appearance fields in kubeconfig extensions
backend/cmd/headlamp_test.go	Added test for cluster appearance updates and refactored test helper function names
backend/pkg/kubeconfig/kubeconfig.go	Extended CustomObject struct with appearance fields and updated DeepCopy method
backend/pkg/kubeconfig/kubeconfig_test.go	Added appearance field assertions to DeepCopy test
frontend/src/lib/k8s/api/v1/clusterRequests.ts	Added storeInBackend field to ClusterRequest interface
frontend/src/lib/k8s/api/v1/clusterApi.ts	Added updateClusterAppearance function and updated setCluster to handle backend storage option
frontend/src/helpers/clusterAppearance.ts	Created helper to extract appearance configuration from cluster metadata
frontend/src/components/App/Settings/SettingsCluster.tsx	Added appearance configuration section with form fields for accent color, warning banner, and icon
frontend/src/components/App/Layout.tsx	Added warning banner display at the top of the main content area
frontend/src/components/cluster/ClusterChooser.tsx	Updated to display custom icon and accent color border
frontend/src/components/cluster/ClusterChooserPopup.tsx	Updated cluster list items to show custom icons with accent colors
frontend/src/components/cluster/Chooser.tsx	Updated cluster button to use custom icon and accent color
frontend/src/components/App/Home/RecentClusters.tsx	Updated recent clusters display to use custom icon and accent color
frontend/src/components/App/icons.ts	Added shield-alert and warning-circle icon definitions
frontend/src/components/App/TopBar.tsx	Added retry: false to cluster query configuration
Translation files (en, fr, de, es, it, pt, hi, ja, ko, ta, zh, zh-tw)	Added translations for appearance-related UI strings

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[skoeva]

thanks for the updates! just a reminder to use atomic commits when ready for review

[alexmathieu22]

Hi @sniok ! Great points your raising :)

1. I did not really take into account the multiple cluster - I honestly forgot since I do not really use this feature. I just commited a change which you can see in the picture. It is only a frontend modification, but it now displays the different banners one under the other. To make sure we understand what message goes with which cluster, the banner now contains the cluster color, logo, and the cluster name at the top of the banner.

2. I am leaving it as is for the cluster picker, but I do get your point, especially with the clusters being displayed in the navbar! The cluster color is currently in the logo in the cluster badges which can be seen in the navbar, in the warning banners, and in the cluster picker. I did not add more, I did not want to start doing to many design changes and I'd leave this for a future MR. Now that the capability is there, we could further refine what we actually want. Once that is done, I definitely would not mind implementing that then! I just did not think I was in position to do so alone with this first MR.

3. Unsure what you mean here with this sentence structure - do you mean that the color selection could be improved (e.g. like a color picker)?

PS: I'm putting here a screen recording of the current final result, and of what the navbar would like if there were a ton of selected clusters.

Screen.Recording.2026-01-08.at.8.13.46.PM.mov

Screen.Recording.2026-01-08.at.8.12.43.PM.mov

Thanks for the multiple feedback guys, glad to see it!

[joaquimrocha]

We have some design from last year about adding icons and accent colors for clusters. I need to share the design when I fetch it again.
I think your proposal is in the right direction but there are a few things to consider:

1. Custom colors will be a problem whenever we change a theme. I think we could avoid this by having an extra setting that gets us a constrast version of the color (if it needs contrast). This option should be on by default. Another option, which I think was in the design I mentioned is to not color the icon at all, and just color some bits related the accent, some borders and stuff like you did.
2. Icons and colors should have a picker for a number of them, and if we want to allow custom, then we make that a secondary option. Like you see the pattern of many color pickers with the "Custom..." as secondary.
3. The accent colors should be tested in different themes. Ideally we could color elements that work across themes, e.g. by having a dark outline on a circle, and we color the circle with the accent color. So this is identifiable regardless of the theme.

This is a significant change, and one we will have a hard time changing once we publish it, so we need to make sure we have a good way forward with it.

[alexmathieu22]

Hi @joaquimrocha, your points are absolutely valid!

Your point 2 is something I also thought about and I did the following proof of concept to illustrate the idea:

Screen.Recording.2026-01-09.at.12.23.25.PM.mov

let me know what you think of this design.

Concerning the other points, how should I go from here? I feel like there are multiple options and they depend on said design choice. Let me know how I can help / what should be the next steps.

Thanks :)

[illume]

I dont think wait for said design. The design was never made public, and also things have changed since.

The other points from @sniok and Joaquim should be considered. Let’s wait for their feedback on your latest proof of concept?

What do you think should be done for each of the points?

[joaquimrocha]

let me know what you think of this design.

Wow. This update is exactly what I had in mind and in line with the design iirc.
All is left is to display the accent color in a way that is compatible with different themes.

I was able to check the design I was talking about. It was never finalized but it's something like this:

To be clear, I don't think we should go with these designs.
How about we try the following: use the chosen icon always in the default active color of the theme (black on white by default), then you the accent color to create a circle around the icon.
This would show in the sidebar, kind of like in the design above but without the colored right border of the Cluster sidebar item.

I would not do much with the top bar cluster picker since we may soon move that to the sidebar itself, but if you want to touch it, just also adding the color circle with the icon within maybe is enough?

Is this communicating my idea more or less?

About the warning header, I wonder if we should make that a plugin. WDYT @illume ?

[alexmathieu22]

Hey @joaquimrocha ! I really like your idea for the default colors and the circle, I think it will uniformize better the whole look, better than what I had originally submitted. I just did an update to use said default colors and it looks great. I reused the same component for the clusters list navbar, home page and cluster picker.

I agree we should do minimal work on the picker, especially since it will probably be decom, but just for the sake of uniformity, I used the same component.

Let me know how that looks to you :)

(Regarding the warning banner / plugin, before modifying it further I will wait for your input, especially for the plugin side of things)

Preview:

Screen.Recording.2026-01-11.at.5.28.19.PM.mov

[joaquimrocha]

It's looking already very nice! I wonder if we should use the white background for icons when on the lighter theme (and dark for the dark theme) though? Basically inverting the current way. Real question, since I don't know how it'd look. But it's looking nice already IMO.
Any other feedback, @illume / @sniok ?

[alexmathieu22]

@joaquimrocha for reference here's what it would like with the reverted colors :)

I think both would work fine, but I do agree, I think it's a little cleaner. I've updated it with this for now.

[joaquimrocha]

I think both would work fine, but I do agree, I think it's a little cleaner. I've updated it with this for now.

Yeah. I agree. Thank you.

Please resolve all comments that you have already applied. Leave any that have pending questions, so it's easy for us to iterate. I hope I can take a look later today once you do that.

[joaquimrocha]

Hey @alexmathieu22 , I just noticed you have 34 commits in this PR. I think not all of those are intended for it, right? Do you mind keeping only the ones relevant to the cluster styling bits? The others should go to other PRs.

[alexmathieu22]

Hey @joaquimrocha ! You are right, I did do quite a lot of back and forth. The current code was only about the appearance settings which I explained in the PR description, I had removed some unrelated changes as asked by @yolossn ! But you are right that this PR had way too much commits / noise. I created a new PR that rebased said commits (branched out just in case). Let me know how that looks and if that makes it any clearer. Thanks :)

[joaquimrocha]

Closing in favor of #4357 .
BTW, @alexmathieu22 I don't think you had to open a completely new PR. If you need help understanding better to how to manage git for squashing commits, etc. find me on the Kubernetes Slack (on a week day please) and I am happy to help you.