chore(backend): use new settings for UI theme configuration

docs/CONFIGURATION.md

@@ -842,7 +842,7 @@ ui:
   refresh: duration
   hideFiltersWhenIdle: bool
   colorTitlebar: bool
-  darkTheme: bool
+  theme: string
   minimalGroupWidth: integer
   alertsPerGroup: integer
   collapseGroups: string
@@ -854,8 +854,14 @@ ui:
   user inactivity
 - `colorTitlebar` - if enabled alert group title bar color will be set to follow
   alerts in that group
-- `darkTheme` - if enabled dark mode will be enabled.
-  Note: dark mode is *experimental* and might be buggy.
+- `theme` - default theme, possible values:
+  - `light` - bright theme
+  - `dark` - dark theme
+  - `auto` - follows browser preferences using
+    [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+    media queries
+
+  Default value is `auto`.
 - `minimalGroupWidth` - minimal width (in pixels) for each alert group rendered
   on the grid. This value is used to calculate the number of columns rendered on
   the grid.
@@ -874,7 +880,7 @@ ui:
   refresh: 30s
   hideFiltersWhenIdle: true
   colorTitlebar: false
-  darkTheme: false
+  theme: "auto"
   minimalGroupWidth: 420
   alertsPerGroup: 5
   collapseGroups: collapsedOnMobile

internal/config/config.go

@@ -101,7 +101,7 @@ func init() {
 	pflag.Duration("ui.refresh", time.Second*30, "UI refresh interval")
 	pflag.Bool("ui.hideFiltersWhenIdle", true, "Hide the filters bar when idle")
 	pflag.Bool("ui.colorTitlebar", false, "Color alert group titlebar based on alert state")
-	pflag.Bool("ui.darkTheme", false, "Enable dark theme")
+	pflag.String("ui.theme", "auto", "Default theme, 'light', 'dark' or 'auto' (follow browser preference)")
 	pflag.Int("ui.minimalGroupWidth", 420, "Minimal width for each alert group on the grid")
 	pflag.Int("ui.alertsPerGroup", 5, "Default number of alerts to show for each alert group")
 	pflag.String("ui.collapseGroups", "collapsedOnMobile", "Default state for alert groups")
@@ -196,7 +196,7 @@ func (config *configSchema) Read() {
 	config.UI.Refresh = v.GetDuration("ui.refresh")
 	config.UI.HideFiltersWhenIdle = v.GetBool("ui.hideFiltersWhenIdle")
 	config.UI.ColorTitlebar = v.GetBool("ui.colorTitlebar")
-	config.UI.DarkTheme = v.GetBool("ui.darkTheme")
+	config.UI.Theme = v.GetString("ui.theme")
 	config.UI.MinimalGroupWidth = v.GetInt("ui.minimalGroupWidth")
 	config.UI.AlertsPerGroup = v.GetInt("ui.alertsPerGroup")
 	config.UI.CollapseGroups = v.GetString("ui.collapseGroups")
@@ -254,6 +254,10 @@ func (config *configSchema) Read() {
 		log.Fatalf("Invalid ui.collapseGroups value '%s', allowed options: expanded, collapsed, collapsedOnMobile", config.UI.CollapseGroups)
 	}
 
+	if !slices.StringInSlice([]string{"light", "dark", "auto"}, config.UI.Theme) {
+		log.Fatalf("Invalid ui.theme value '%s', allowed options: light, dark, auto", config.UI.Theme)
+	}
+
 	// FIXME workaround  for https://github.com/prymitive/karma/issues/507
 	// until https://github.com/spf13/viper/pull/635 is merged
 	// read in raw config file if it's used and override maps where keys are label

internal/config/config_test.go

@@ -144,7 +144,7 @@ ui:
   refresh: 30s
   hideFiltersWhenIdle: true
   colorTitlebar: false
-  darkTheme: false
+  theme: auto
   minimalGroupWidth: 420
   alertsPerGroup: 5
   collapseGroups: collapsedOnMobile
@@ -311,3 +311,19 @@ func TestInvalidUICollapseGroups(t *testing.T) {
 		t.Error("Invalid ui.collapseGroups value didn't cause log.Fatal()")
 	}
 }
+
+func TestInvalidUITheme(t *testing.T) {
+	resetEnv()
+	os.Setenv("UI_THEME", "foo")
+
+	log.SetLevel(log.PanicLevel)
+	defer func() { log.StandardLogger().ExitFunc = nil }()
+	var wasFatal bool
+	log.StandardLogger().ExitFunc = func(int) { wasFatal = true }
+
+	Config.Read()
+
+	if !wasFatal {
+		t.Error("Invalid ui.theme value didn't cause log.Fatal()")
+	}
+}

internal/config/models.go

@@ -124,7 +124,7 @@ type configSchema struct {
 		Refresh             time.Duration
 		HideFiltersWhenIdle bool   `yaml:"hideFiltersWhenIdle" mapstructure:"hideFiltersWhenIdle"`
 		ColorTitlebar       bool   `yaml:"colorTitlebar" mapstructure:"colorTitlebar"`
-		DarkTheme           bool   `yaml:"darkTheme" mapstructure:"darkTheme"`
+		Theme               string `yaml:"theme" mapstructure:"theme"`
 		MinimalGroupWidth   int    `yaml:"minimalGroupWidth" mapstructure:"minimalGroupWidth"`
 		AlertsPerGroup      int    `yaml:"alertsPerGroup" mapstructure:"alertsPerGroup"`
 		CollapseGroups      string `yaml:"collapseGroups" mapstructure:"collapseGroups"`