Themes: Adds support for extraThemes (behind feature toggle) (#67981)

* Foundations to support more themes

* Fixes

* add another test theme

* Refactorings

* more refactoring

* Update

* Fixing tests

* Fix

* Update

pkg/api/dtos/index.go

@@ -18,7 +18,7 @@ type IndexViewData struct {
 	NavTree                             *navtree.NavTreeRoot
 	BuildVersion                        string
 	BuildCommit                         string
-	Theme                               string
+	ThemeType                           string
 	NewGrafanaVersionExists             bool
 	NewGrafanaVersion                   string
 	AppName                             string

pkg/api/index.go

@@ -16,13 +16,6 @@ import (
 	"github.com/grafana/grafana/pkg/setting"
 )
 
-const (
-	// Themes
-	lightName  = "light"
-	darkName   = "dark"
-	systemName = "system"
-)
-
 func (hs *HTTPServer) editorInAnyFolder(c *contextmodel.ReqContext) bool {
 	hasEditPermissionInFoldersQuery := folder.HasEditPermissionInFoldersQuery{SignedInUser: c.SignedInUser}
 	hasEditPermissionInFoldersQueryResult, err := hs.DashboardService.HasEditPermissionInFolders(c.Req.Context(), &hasEditPermissionInFoldersQuery)
@@ -91,6 +84,8 @@ func (hs *HTTPServer) setIndexViewData(c *contextmodel.ReqContext) (*dtos.IndexV
 		weekStart = *prefs.WeekStart
 	}
 
+	theme := hs.getThemeForIndexData(prefs.Theme, c.Query("theme"))
+
 	data := dtos.IndexViewData{
 		User: &dtos.CurrentUser{
 			Id:                         c.UserID,
@@ -105,8 +100,8 @@ func (hs *HTTPServer) setIndexViewData(c *contextmodel.ReqContext) (*dtos.IndexV
 			OrgRole:                    c.OrgRole,
 			GravatarUrl:                dtos.GetGravatarUrl(c.Email),
 			IsGrafanaAdmin:             c.IsGrafanaAdmin,
-			Theme:                      prefs.Theme,
-			LightTheme:                 prefs.Theme == lightName,
+			Theme:                      theme.ID,
+			LightTheme:                 theme.Type == "light",
 			Timezone:                   prefs.Timezone,
 			WeekStart:                  weekStart,
 			Locale:                     locale,
@@ -119,7 +114,7 @@ func (hs *HTTPServer) setIndexViewData(c *contextmodel.ReqContext) (*dtos.IndexV
 			},
 		},
 		Settings:                            settings,
-		Theme:                               prefs.Theme,
+		ThemeType:                           theme.Type,
 		AppUrl:                              appURL,
 		AppSubUrl:                           appSubURL,
 		GoogleAnalyticsId:                   settings.GoogleAnalyticsId,
@@ -164,12 +159,6 @@ func (hs *HTTPServer) setIndexViewData(c *contextmodel.ReqContext) (*dtos.IndexV
 		data.User.Name = data.User.Login
 	}
 
-	themeURLParam := c.Query("theme")
-	if themeURLParam == lightName || themeURLParam == darkName || themeURLParam == systemName {
-		data.User.Theme = themeURLParam
-		data.Theme = themeURLParam
-	}
-
 	hs.HooksService.RunIndexDataHooks(&data, c)
 
 	data.NavTree.ApplyAdminIA()
@@ -201,3 +190,18 @@ func (hs *HTTPServer) NotFoundHandler(c *contextmodel.ReqContext) {
 
 	c.HTML(404, "index", data)
 }
+
+func (hs *HTTPServer) getThemeForIndexData(themePrefId string, themeURLParam string) *pref.ThemeDTO {
+	if themeURLParam != "" && pref.IsValidThemeID(themeURLParam) {
+		return pref.GetThemeByID(themeURLParam)
+	}
+
+	if pref.IsValidThemeID(themePrefId) {
+		theme := pref.GetThemeByID(themePrefId)
+		if !theme.IsExtra || hs.Features.IsEnabled(featuremgmt.FlagExtraThemes) {
+			return theme
+		}
+	}
+
+	return pref.GetThemeByID(hs.Cfg.DefaultTheme)
+}

pkg/api/preferences.go

@@ -13,13 +13,6 @@ import (
 	"github.com/grafana/grafana/pkg/web"
 )
 
-const (
-	defaultTheme string = ""
-	darkTheme    string = "dark"
-	lightTheme   string = "light"
-	systemTheme  string = "system"
-)
-
 // POST /api/preferences/set-home-dash
 func (hs *HTTPServer) SetHomeDashboard(c *contextmodel.ReqContext) response.Response {
 	cmd := pref.SavePreferenceCommand{}
@@ -135,8 +128,8 @@ func (hs *HTTPServer) UpdateUserPreferences(c *contextmodel.ReqContext) response
 }
 
 func (hs *HTTPServer) updatePreferencesFor(ctx context.Context, orgID, userID, teamId int64, dtoCmd *dtos.UpdatePrefsCmd) response.Response {
-	if dtoCmd.Theme != lightTheme && dtoCmd.Theme != darkTheme && dtoCmd.Theme != defaultTheme && dtoCmd.Theme != systemTheme {
-		return response.Error(400, "Invalid theme", nil)
+	if !pref.IsValidThemeID(dtoCmd.Theme) {
+		return response.Error(http.StatusBadRequest, "Invalid theme", nil)
 	}
 
 	dashboardID := dtoCmd.HomeDashboardID
@@ -193,7 +186,7 @@ func (hs *HTTPServer) PatchUserPreferences(c *contextmodel.ReqContext) response.
 }
 
 func (hs *HTTPServer) patchPreferencesFor(ctx context.Context, orgID, userID, teamId int64, dtoCmd *dtos.PatchPrefsCmd) response.Response {
-	if dtoCmd.Theme != nil && *dtoCmd.Theme != lightTheme && *dtoCmd.Theme != darkTheme && *dtoCmd.Theme != defaultTheme && *dtoCmd.Theme != systemTheme {
+	if dtoCmd.Theme != nil && !pref.IsValidThemeID(*dtoCmd.Theme) {
 		return response.Error(http.StatusBadRequest, "Invalid theme", nil)
 	}
 

pkg/services/featuremgmt/registry.go

@@ -530,5 +530,12 @@ var (
 			State:        FeatureStateBeta,
 			Owner:        grafanaBiSquad,
 		},
+		{
+			Name:         "extraThemes",
+			Description:  "Enables extra themes",
+			FrontendOnly: true,
+			State:        FeatureStateAlpha,
+			Owner:        grafanaUserEssentialsSquad,
+		},
 	}
 )

pkg/services/featuremgmt/toggles_gen.csv

@@ -78,3 +78,4 @@ advancedDataSourcePicker,alpha,@grafana/dashboards-squad,false,false,false,true
 opensearchDetectVersion,alpha,@grafana/aws-plugins,false,false,false,true
 faroDatasourceSelector,beta,@grafana/app-o11y,false,false,false,true
 enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true
+extraThemes,alpha,@grafana/user-essentials,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -322,4 +322,8 @@ const (
 	// FlagEnableDatagridEditing
 	// Enables the edit functionality in the datagrid panel
 	FlagEnableDatagridEditing = "enableDatagridEditing"
+
+	// FlagExtraThemes
+	// Enables extra themes
+	FlagExtraThemes = "extraThemes"
 )

pkg/services/preference/themes.go

@@ -0,0 +1,34 @@
+package pref
+
+type ThemeDTO struct {
+	ID      string `json:"id"`
+	Type    string `json:"type"`
+	IsExtra bool   `json:"isExtra"`
+}
+
+var themes = []ThemeDTO{
+	{ID: "light", Type: "light"},
+	{ID: "dark", Type: "dark"},
+	{ID: "system", Type: "dark"},
+	{ID: "midnight", Type: "dark", IsExtra: true},
+	{ID: "blue-night", Type: "dark", IsExtra: true},
+}
+
+func GetThemeByID(id string) *ThemeDTO {
+	for _, theme := range themes {
+		if theme.ID == id {
+			return &theme
+		}
+	}
+
+	return nil
+}
+
+func IsValidThemeID(id string) bool {
+	for _, theme := range themes {
+		if theme.ID == id {
+			return true
+		}
+	}
+	return false
+}