Add configurable default theme support #4384

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 <[email protected]>

k8s-ci-robot · 2026-01-18T21:06:04Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: guillaumebernard84
Once this PR has been reviewed and has the lgtm label, please assign illume 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

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 <[email protected]>

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.

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 <[email protected]> Signed-off-by: Guillaume BERNARD <[email protected]>

Ok, this copilot suggestion makes sense Co-authored-by: Copilot <[email protected]> Signed-off-by: Guillaume BERNARD <[email protected]>

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.

Copilot · 2026-02-01T21:56:28Z

backend/pkg/config/config.go

+	// Theme config
+	DefaultLightTheme string `koanf:"default-light-theme"`
+	DefaultDarkTheme  string `koanf:"default-dark-theme"`
+	ForceTheme        string `koanf:"force-theme"`


There is no validation to check if both forceTheme and default themes are set together. While the code handles this scenario (forceTheme takes precedence), it would be more user-friendly to warn administrators if they set both forceTheme and defaultLightTheme/defaultDarkTheme, as the default themes will be ignored. Consider adding a validation warning or documentation about this precedence.

Copilot · 2026-02-01T21:56:28Z

frontend/src/components/App/themeSlice.ts

+    applyBackendThemeConfig(
+      state,
+      action: PayloadAction<{
+        defaultLightTheme?: string;
+        defaultDarkTheme?: string;
+        forceTheme?: string;
+      }>
+    ) {
+      const backendConfig = action.payload;
+      const newThemeName = getThemeName(backendConfig);
+
+      // Only update if theme has changed
+      if (newThemeName !== state.name) {
+        state.name = newThemeName;
+        // Only persist to localStorage if not forced
+        if (!backendConfig.forceTheme) {
+          setAppTheme(newThemeName);
+        } else {
+          // Clear any previously stored user theme preference when a forced theme is applied
+          try {
+            localStorage.removeItem('headlampThemePreference');
+          } catch (e) {}
+        }
+      }
+    },


The applyBackendThemeConfig action is exported and used in multiple places (Layout.tsx and plugin/index.ts) but there are no unit tests for this reducer action. While the getThemeName function has comprehensive tests, the Redux action's behavior (updating state, conditionally persisting to localStorage, handling theme changes) is not tested. Consider adding tests to verify that the action correctly handles forced themes, updates state appropriately, and clears localStorage when a forced theme is applied.

guillaumebernard84 added 2 commits January 18, 2026 21:27

adding default theme system

a6294cb

Signed-off-by: Guillaume BERNARD <[email protected]>

fix theme config page when theme is forced

aa4b6ee

Signed-off-by: Guillaume BERNARD <[email protected]>

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 <[email protected]>

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 2 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 <[email protected]> Signed-off-by: Guillaume BERNARD <[email protected]>

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

621b789

Ok, this copilot suggestion makes sense Co-authored-by: Copilot <[email protected]> Signed-off-by: Guillaume BERNARD <[email protected]>

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

Add configurable default theme support #4384

Are you sure you want to change the base?

Add configurable default theme support #4384

Conversation

guillaumebernard84 commented Jan 18, 2026

Summary

Related Issue

Changes

Steps to Test

Uh oh!

k8s-ci-robot commented Jan 18, 2026

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!

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!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants