Add configurable default theme support

[guillaumebernard84]

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

[guillaumebernard84]

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

[joaquimrocha]

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

[guillaumebernard84]

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]

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]

/retest

[k8s-ci-robot]

@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]

/honk

[k8s-ci-robot]

@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]

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

[illume]

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.

[Copilot]

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

[guillaumebernard84]

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.

[illume]

🎉 thanks!

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

[illume]

Thanks for these changes.

Can you please have a look at the git commits to see if they meet the contribution guidelines? We use a Linux kernel style of git commits. See the contributing guide for general context, and please see previous git commits with git log for examples.

Commit guidelines

• Use atomic commits focused on a single change.
• Use the title format <area>: <description of changes>.
• Keep the title and body lines under 72 characters.
• Explain the intention and why the change is needed.
• Make commit titles meaningful and describe what changed.
• Do not add code that a later commit rewrites; squash or reorder commits instead.
• Do not include Fixes #NN in commit messages.

Good examples:

• frontend: HomeButton: Fix so it navigates to home
• backend: config: Add enable-dynamic-clusters flag

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 5 comments.

[illume]

Thanks for this PR.

the PR has a merge-main commit; please rebase against main to keep the history clean.

Why this matters

Merge commits from main make the PR history harder to review. Please rebase your branch on top of the latest main instead, then update the PR with the rebased commits.

The open review comments from Copilot still need attention — can you have a look? Once addressed, please mark them as resolved.

[illume]

Thanks for working on this.

Looks like the i18n check is failing. Running cd frontend && npm run i18n will regenerate the translation files — please commit the result.

How to update translation files

Run cd frontend && npm run i18n to regenerate the translation files. Commit the updated files alongside your other changes.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 2 comments.

[guillaumebernard84]

Hello @illume, I rebased and rewrote my commit history. I also applied the latest two suggestions from copilot.

[illume]

@guillaumebernard84 thanks.

[illume]

🎉 thanks!

[k8s-ci-robot]

[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

Lint issues are fixed