Add configurable default theme support by guillaumebernard84 · Pull Request #4384 · kubernetes-sigs/headlamp

guillaumebernard84 · 2026-01-18T21:05:56Z

Summary

This PR adds runtime configuration for default themes via command-line arguments, addressing the feedback from #4307

Related Issue

Addresses feedback from #4307

Changes

Adds three new CLI flags:
--default-light-theme - Default theme when OS prefers light mode
--default-dark-theme - Default theme when OS prefers dark mode
--force-theme - Force specific theme (overrides user preference)

Also available as environment variables: HEADLAMP_CONFIG_DEFAULT_LIGHT_THEME, HEADLAMP_CONFIG_DEFAULT_DARK_THEME, HEADLAMP_CONFIG_FORCE_THEME

When a theme is forced, the theme selection menu is greyed out, and "Theme has been forced by your administrator" is displayed. I localized it to French as I'm a native French speaker.

Steps to Test

use a browser in private browsing mode or clean your prefered theme from localstorage: run delete localStorage.headlampThemePreference from your browser JS console
use the command line arguments to set a default or force a theme, for example --force-theme="Headlamp Classic"

I also added unit tests:

Backend tests: go test ./pkg/config -run TestParseThemeConfiguration
Frontend tests: npm test -- themes.test.ts

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

guillaumebernard84 · 2026-01-18T22:12:32Z

Hello @sniok, here is the new PR addressing your feedback from #4307

joaquimrocha · 2026-01-19T09:41:07Z

Hi @guillaumebernard84 . I think this falls in the category of distributed settings that we'd like to have soon. See #3979 .
I see the logic for having a CLI arg for settings like the theme, but I think we should have this as a general "app-settings" arg, which we can pass a json file with different settings. This could include also plugin settings I mention in the issue pasted above.

@sniok , WDYT?

skoeva

I see some errors in the CI, could you run these commands locally to try to fix those?

make frontend-test
make backend-lint-fix

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

guillaumebernard84 · 2026-01-19T20:54:43Z

Three fixes applied:

Go Linter: Refactored large table-driven test into 9 separate test functions to satisfy 60-line limit and split long lines.
Frontend Test: Settings.tsx UI changes altered MUI CSS classes. Ran npm test -- src/storybook.test.tsx -u to update snapshot.
TypeDoc Build: Exported applyBackendThemeConfig and ensureValidThemeName actions from themeSlice.ts so TypeDoc can resolve action types (was accessing via themeSlice.actions.* without explicit exports).

guillaumebernard84 · 2026-01-19T20:56:16Z

Hi @guillaumebernard84 . I think this falls in the category of distributed settings that we'd like to have soon. See #3979 . I see the logic for having a CLI arg for settings like the theme, but I think we should have this as a general "app-settings" arg, which we can pass a json file with different settings. This could include also plugin settings I mention in the issue pasted above.

@sniok , WDYT?

Yes, this could be an good solution too. I'll comment in #3979

guillaumebernard84 · 2026-01-19T21:03:57Z

/retest

k8s-ci-robot · 2026-01-19T21:04:12Z

@guillaumebernard84: Cannot trigger testing until a trusted user reviews the PR and leaves an /ok-to-test message.

Details

In response to this:

/retest

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

guillaumebernard84 · 2026-01-19T21:07:13Z

/honk

k8s-ci-robot · 2026-01-19T21:07:16Z

@guillaumebernard84:

Details

In response to this:

/honk

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

guillaumebernard84 · 2026-01-28T13:13:33Z

Hello @skoeva, can you please rerun the tests? Thanks

sniok · 2026-01-28T16:07:07Z

backend/cmd/headlamp.go

 	IsDynamicClusterEnabled bool      `json:"isDynamicClusterEnabled"`
+	DefaultLightTheme       string    `json:"defaultLightTheme,omitempty"`
+	DefaultDarkTheme        string    `json:"defaultDarkTheme,omitempty"`
+	ForceTheme              string    `json:"forceTheme,omitempty"`


shouldn't this be a boolean? so that default light/dark theme can be forced

I don't know, it could.
It felt more natural for me to set --force-theme corporate-light instead of --default-light-theme corporate-light --force-theme
But that's a matter of taste. I can change that if you want.

it's not a matter of taste. for accessibility reasons there should be an option to force dark or light theme depending on the user preference

Ok. What behaviour do you want?

What should happen to users with dark theme preferences when ran with --default-light-theme corporate-light --force-theme ?

Wouldn't it be easier to have two options --force-light-theme and --force-dark-theme as strings?

illume · 2026-02-01T17:12:04Z

TIL /honk lol :)

illume

Thanks for this.

There's a GitHub check failing.

Can you please check the issue out locally?

npm run backend:lint
npm run backend:format
npm run backend:test

Copilot

Pull request overview

This PR adds runtime configuration for default themes via command-line arguments and environment variables, addressing feedback from PR #4307. The implementation allows administrators to configure default themes based on OS preference and to force a specific theme, overriding user preferences.

Changes:

Adds three new CLI flags and corresponding environment variables for theme configuration (--default-light-theme, --default-dark-theme, --force-theme)
Implements backend configuration parsing and API endpoints to pass theme configuration to the frontend
Updates frontend theme selection logic to respect backend configuration with proper precedence order
Adds UI indication and disables theme selection when a theme is forced by an administrator
Includes comprehensive test coverage for both backend and frontend changes

Reviewed changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
backend/pkg/config/config.go	Adds theme configuration flags and struct fields
backend/pkg/config/config_theme_test.go	Comprehensive backend tests for theme configuration parsing
backend/pkg/headlampconfig/headlampConfig.go	Extends HeadlampCFG with theme configuration fields
backend/cmd/server.go	Maps theme config from Config to HeadlampCFG
backend/cmd/headlamp.go	Updates clientConfig struct to include theme fields and getConfig endpoint
backend/cmd/stateless.go	Updates parseKubeConfig to include theme configuration
frontend/src/redux/configSlice.ts	Adds theme configuration to Redux state
frontend/src/lib/themes.ts	Implements theme precedence logic with backend configuration support
frontend/src/lib/themes.test.ts	Comprehensive frontend tests for theme selection logic
frontend/src/components/App/themeSlice.ts	Adds applyBackendThemeConfig action and exports ensureValidThemeName
frontend/src/components/App/Layout.tsx	Applies backend theme config when fetched from backend
frontend/src/plugin/index.ts	Reapplies backend theme config after plugins load
frontend/src/components/App/Settings/Settings.tsx	Disables theme selection UI and shows forced theme message
frontend/src/i18n/locales/*/translation.json	Adds localization for forced theme message
frontend/src/components/App/Settings/snapshots/Settings.General.stories.storyshot	Updates snapshot for UI styling changes

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

frontend/src/components/App/Settings/Settings.tsx

frontend/src/components/App/themeSlice.ts

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Ok, this makes sense Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

Ok, this copilot suggestion makes sense Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

guillaumebernard84 · 2026-02-01T20:26:58Z

Hello @illume, I fixed the backend linter error, and accepted the two changes from the copilot review. It seems the third one from copilot encountered an error. Do you want to rerun it? I passed the frontend linter and tests after accepting the changes, it works.

Copilot

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 4 comments.

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

backend/pkg/config/config.go

frontend/src/components/App/themeSlice.ts

illume

🎉 thanks!

(I won't merge yet, but will wait for other people to review/test)

k8s-ci-robot · 2026-02-03T13:37:08Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: guillaumebernard84, illume

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~OWNERS~~ [illume]

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

illume · 2026-02-03T15:24:56Z

@guillaumebernard84 Sorry, there's some git conflicts now. Would you mind having a look?

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

guillaumebernard84 · 2026-02-03T19:13:32Z

I fixed the git conflicts, I'll try to fix the build errors

k8s-ci-robot · 2026-02-13T19:10:24Z

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

guillaumebernard84 added 2 commits January 18, 2026 21:27

adding default theme system

a6294cb

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

fix theme config page when theme is forced

aa4b6ee

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

k8s-ci-robot added the cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. label Jan 18, 2026

k8s-ci-robot requested review from ashu8912 and yolossn January 18, 2026 21:06

k8s-ci-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Jan 18, 2026

skoeva requested changes Jan 19, 2026

View reviewed changes

fixes go linter issue, doc build issue, and frontend test issue

b6dde83

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

guillaumebernard84 requested a review from skoeva January 19, 2026 20:53

guillaumebernard84 mentioned this pull request Jan 19, 2026

Distributed Headlamp settings #3979

Open

sniok reviewed Jan 28, 2026

View reviewed changes

illume added this to the v0.40.0 milestone Feb 1, 2026

illume requested changes Feb 1, 2026

View reviewed changes

illume requested a review from Copilot February 1, 2026 17:16

Copilot started reviewing on behalf of illume February 1, 2026 17:16 View session

Copilot AI reviewed Feb 1, 2026

View reviewed changes

frontend/src/components/App/Settings/Settings.tsx Outdated Show resolved Hide resolved

frontend/src/components/App/themeSlice.ts Show resolved Hide resolved

Copilot AI reviewed Feb 1, 2026

View reviewed changes

guillaumebernard84 and others added 3 commits February 1, 2026 21:15

fix linter error

2f42449

Update frontend/src/components/App/Settings/Settings.tsx

27e23bf

Ok, this makes sense Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

Update frontend/src/components/App/themeSlice.ts

621b789

Ok, this copilot suggestion makes sense Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

guillaumebernard84 requested a review from illume February 1, 2026 20:27

illume requested a review from Copilot February 1, 2026 21:49

Copilot started reviewing on behalf of illume February 1, 2026 21:49 View session

Copilot AI reviewed Feb 1, 2026

View reviewed changes

backend/pkg/config/config.go Show resolved Hide resolved

frontend/src/components/App/themeSlice.ts Show resolved Hide resolved

illume approved these changes Feb 3, 2026

View reviewed changes

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Feb 3, 2026

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026

Merge branch 'main' into default-theme

e81736a

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

k8s-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026

guillaumebernard84 added 2 commits February 3, 2026 20:20

fix linter issue

d8046e1

add Copilot suggestions

e4e300e

k8s-ci-robot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. and removed size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Feb 3, 2026

illume modified the milestones: v0.40.0, v0.41.0 Feb 4, 2026

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 13, 2026

Conversation

guillaumebernard84 commented Jan 18, 2026

Summary

Related Issue

Changes

Steps to Test

Uh oh!

guillaumebernard84 commented Jan 18, 2026

Uh oh!

joaquimrocha commented Jan 19, 2026

Uh oh!

skoeva left a comment

Choose a reason for hiding this comment

Uh oh!

guillaumebernard84 commented Jan 19, 2026

Uh oh!

guillaumebernard84 commented Jan 19, 2026

Uh oh!

guillaumebernard84 commented Jan 19, 2026

Uh oh!

k8s-ci-robot commented Jan 19, 2026

Uh oh!

guillaumebernard84 commented Jan 19, 2026

Uh oh!

k8s-ci-robot commented Jan 19, 2026

Uh oh!

guillaumebernard84 commented Jan 28, 2026

Uh oh!

sniok Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

guillaumebernard84 Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

sniok Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

guillaumebernard84 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

illume commented Feb 1, 2026

Uh oh!

illume left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

guillaumebernard84 commented Feb 1, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

illume left a comment

Choose a reason for hiding this comment

Uh oh!

k8s-ci-robot commented Feb 3, 2026

Uh oh!

illume commented Feb 3, 2026

Uh oh!

guillaumebernard84 commented Feb 3, 2026

Uh oh!

k8s-ci-robot commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development