feat(ui): configurable default theme

Add support for setting a default theme (light, dark, auto) via the
argocd-cm ConfigMap using the ui.defaulttheme key. The backend setting
is exposed through the /api/v1/settings API and consumed by the UI on
initialization, allowing operators to configure the default theme
without requiring users to manually select it.

Closes: #18524

Signed-off-by: pasteley <ceasebeing@gmail.com>

Author: pasteley

server/settings/settings.go

@@ -116,6 +116,7 @@ func (s *Server) Get(ctx context.Context, _ *settingspkg.SettingsQuery) (*settin
 		UserLoginsDisabled:        userLoginsDisabled,
 		KustomizeVersions:         kustomizeVersions,
 		UiCssURL:                  argoCDSettings.UiCssURL,
+		UiDefaultTheme:            argoCDSettings.UiDefaultTheme,
 		TrackingMethod:            trackingMethod,
 		InstallationID:            installationID,
 		ExecEnabled:               argoCDSettings.ExecEnabled,

server/settings/settings.proto

@@ -40,6 +40,7 @@ message Settings {
     string uiBannerPosition = 20;
     string statusBadgeRootUrl = 21;
     bool execEnabled = 22;
+    string uiDefaultTheme = 30;
     string controllerNamespace = 23;
     bool appsInAnyNamespaceEnabled = 24;
     bool impersonationEnabled = 25;

ui/src/app/app.tsx

@@ -122,6 +122,9 @@ export class App extends React.Component<{}, {popupProps: PopupProps; showVersio
             this.unauthorizedSubscription = subscription;
         });
         const authSettings = await services.authService.settings();
+        if (authSettings.uiDefaultTheme) {
+            services.viewPreferences.setBackendDefaultTheme(authSettings.uiDefaultTheme);
+        }
         const {trackingID, anonymizeUsers} = authSettings.googleAnalytics || {trackingID: '', anonymizeUsers: true};
         const {loggedIn, username} = await services.users.get();
         if (trackingID) {

ui/src/app/shared/models.ts

@@ -609,6 +609,7 @@ export interface AuthSettings {
     userLoginsDisabled: boolean;
     kustomizeVersions: string[];
     uiCssURL: string;
+    uiDefaultTheme: string;
     uiBannerContent: string;
     uiBannerURL: string;
     uiBannerPermanent: boolean;

ui/src/app/shared/services/view-preferences-service.ts

@@ -204,6 +204,7 @@ const DEFAULT_PREFERENCES: ViewPreferences = {
 
 export class ViewPreferencesService {
     private preferencesSubj: BehaviorSubject<ViewPreferences>;
+    private backendDefaultTheme: string = '';
 
     public init() {
         if (!this.preferencesSubj) {
@@ -214,6 +215,12 @@ export class ViewPreferencesService {
         }
     }
 
+    public setBackendDefaultTheme(theme: string) {
+        this.backendDefaultTheme = theme;
+        // Reload preferences with the new backend default
+        this.preferencesSubj.next(this.loadPreferences());
+    }
+
     public getPreferences(): Observable<ViewPreferences> {
         return this.preferencesSubj;
     }
@@ -239,6 +246,11 @@ export class ViewPreferencesService {
         } else {
             preferences = DEFAULT_PREFERENCES;
         }
-        return deepMerge(DEFAULT_PREFERENCES, preferences);
+        const merged = deepMerge(DEFAULT_PREFERENCES, preferences);
+        // If backend default theme is set and user hasn't explicitly set a theme, use backend default
+        if (this.backendDefaultTheme && (!preferencesStr || !JSON.parse(preferencesStr).theme)) {
+            merged.theme = this.backendDefaultTheme;
+        }
+        return merged;
     }
 }

util/settings/settings.go

@@ -115,6 +115,8 @@ type ArgoCDSettings struct {
 	UiBannerPermanent bool `json:"uiBannerPermanent,omitempty"` //nolint:revive //FIXME(var-naming)
 	// Position of UI Banner
 	UiBannerPosition string `json:"uiBannerPosition,omitempty"` //nolint:revive //FIXME(var-naming)
+	// UiDefaultTheme holds the default theme for the UI (light, dark, auto)
+	UiDefaultTheme string `json:"uiDefaultTheme,omitempty"` //nolint:revive //FIXME(var-naming)
 	// PasswordPattern for password regular expression
 	PasswordPattern string `json:"passwordPattern,omitempty"`
 	// BinaryUrls contains the URLs for downloading argocd binaries
@@ -505,6 +507,8 @@ const (
 	settingUIBannerPermanentKey = "ui.bannerpermanent"
 	// settingUIBannerPositionKey designates the key for the position of the banner
 	settingUIBannerPositionKey = "ui.bannerposition"
+	// settingUIDefaultThemeKey designates the key for the default theme (light, dark, auto)
+	settingUIDefaultThemeKey = "ui.defaulttheme"
 	// settingsBinaryUrlsKey designates the key for the argocd binary URLs
 	settingsBinaryUrlsKey = "help.download"
 	// settingsApplicationInstanceLabelKey is the key to configure injected app instance label key
@@ -1473,6 +1477,7 @@ func updateSettingsFromConfigMap(settings *ArgoCDSettings, argoCDCM *corev1.Conf
 	settings.UiBannerContent = argoCDCM.Data[settingUIBannerContentKey]
 	settings.UiBannerPermanent = argoCDCM.Data[settingUIBannerPermanentKey] == "true"
 	settings.UiBannerPosition = argoCDCM.Data[settingUIBannerPositionKey]
+	settings.UiDefaultTheme = argoCDCM.Data[settingUIDefaultThemeKey]
 	settings.BinaryUrls = getDownloadBinaryUrlsFromConfigMap(argoCDCM)
 	if err := ValidateExternalURL(argoCDCM.Data[settingURLKey]); err != nil {
 		log.Warnf("Failed to validate URL in configmap: %v", err)