Merge bdda329b6f into 852547d0dc

routers/web/user/setting/profile.go

@@ -319,13 +319,7 @@ func Repos(ctx *context.Context) {
 func Appearance(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("settings.appearance")
 	ctx.Data["PageIsSettingsAppearance"] = true
-
-	allThemes := webtheme.GetAvailableThemes()
-	if webtheme.IsThemeAvailable(setting.UI.DefaultTheme) {
-		allThemes = util.SliceRemoveAll(allThemes, setting.UI.DefaultTheme)
-		allThemes = append([]string{setting.UI.DefaultTheme}, allThemes...) // move the default theme to the top
-	}
-	ctx.Data["AllThemes"] = allThemes
+	ctx.Data["AllThemes"] = webtheme.GetAvailableThemes()
 
 	var hiddenCommentTypes *big.Int
 	val, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyHiddenCommentTypes)

services/webtheme/webtheme.go

@@ -4,6 +4,7 @@
 package webtheme
 
 import (
+	"regexp"
 	"sort"
 	"strings"
 	"sync"
@@ -12,63 +13,122 @@ import (
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/public"
 	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/util"
 )
 
 var (
-	availableThemes    []string
-	availableThemesSet container.Set[string]
-	themeOnce          sync.Once
+	availableThemes             []*ThemeMetaInfo
+	availableThemeInternalNames container.Set[string]
+	themeOnce                   sync.Once
 )
 
+const (
+	fileNamePrefix = "theme-"
+	fileNameSuffix = ".css"
+)
+
+type ThemeMetaInfo struct {
+	FileName     string
+	InternalName string
+	DisplayName  string
+	IsDarkTheme  bool
+}
+
+// extract CSS vars from CSS, taking the last occurrence in a file to support combined themes like "auto"
+func parseThemeMetaInfoToMap(cssContent string) map[string]string {
+	m := map[string]string{}
+
+	for _, v := range []string{"--theme-display-name", "--is-dark-theme"} {
+		re := regexp.MustCompile(v + `\s?:\s?["']?([^"';]+)["';]`)
+		matches := re.FindAllStringSubmatch(cssContent, -1)
+		numMatches := len(matches)
+		if numMatches > 0 {
+			m[v] = matches[numMatches-1][1]
+		}
+	}
+	return m
+}
+
+func defaultThemeMetaInfoByFileName(fileName string) *ThemeMetaInfo {
+	themeInfo := &ThemeMetaInfo{
+		FileName:     fileName,
+		InternalName: strings.TrimSuffix(strings.TrimPrefix(fileName, fileNamePrefix), fileNameSuffix),
+	}
+	themeInfo.DisplayName = themeInfo.InternalName
+	return themeInfo
+}
+
+func defaultThemeMetaInfoByInternalName(fileName string) *ThemeMetaInfo {
+	return defaultThemeMetaInfoByFileName(fileNamePrefix + fileName + fileNameSuffix)
+}
+
+func parseThemeMetaInfo(fileName, cssContent string) *ThemeMetaInfo {
+	themeInfo := defaultThemeMetaInfoByFileName(fileName)
+	m := parseThemeMetaInfoToMap(cssContent)
+	if m == nil {
+		return themeInfo
+	}
+	themeInfo.DisplayName = m["--theme-display-name"]
+	themeInfo.IsDarkTheme = strings.EqualFold(m["--is-dark-theme"], "true")
+	return themeInfo
+}
+
 func initThemes() {
 	availableThemes = nil
 	defer func() {
-		availableThemesSet = container.SetOf(availableThemes...)
-		if !availableThemesSet.Contains(setting.UI.DefaultTheme) {
+		availableThemeInternalNames = container.Set[string]{}
+		for _, theme := range availableThemes {
+			availableThemeInternalNames.Add(theme.InternalName)
+		}
+		if !availableThemeInternalNames.Contains(setting.UI.DefaultTheme) {
 			setting.LogStartupProblem(1, log.ERROR, "Default theme %q is not available, please correct the '[ui].DEFAULT_THEME' setting in the config file", setting.UI.DefaultTheme)
 		}
 	}()
 	cssFiles, err := public.AssetFS().ListFiles("/assets/css")
 	if err != nil {
 		log.Error("Failed to list themes: %v", err)
-		availableThemes = []string{setting.UI.DefaultTheme}
+		availableThemes = []*ThemeMetaInfo{defaultThemeMetaInfoByInternalName(setting.UI.DefaultTheme)}
 		return
 	}
-	var foundThemes []string
-	for _, name := range cssFiles {
-		name, ok := strings.CutPrefix(name, "theme-")
-		if !ok {
-			continue
+	var foundThemes []*ThemeMetaInfo
+	for _, fileName := range cssFiles {
+		if strings.HasPrefix(fileName, fileNamePrefix) && strings.HasSuffix(fileName, fileNameSuffix) {
+			content, err := public.AssetFS().ReadFile("/assets/css/" + fileName)
+			if err != nil {
+				log.Error("Failed to read theme file %q: %v", fileName, err)
+				continue
+			}
+			foundThemes = append(foundThemes, parseThemeMetaInfo(fileName, util.UnsafeBytesToString(content)))
 		}
-		name, ok = strings.CutSuffix(name, ".css")
-		if !ok {
-			continue
-		}
-		foundThemes = append(foundThemes, name)
 	}
 	if len(setting.UI.Themes) > 0 {
 		allowedThemes := container.SetOf(setting.UI.Themes...)
 		for _, theme := range foundThemes {
-			if allowedThemes.Contains(theme) {
+			if allowedThemes.Contains(theme.InternalName) {
 				availableThemes = append(availableThemes, theme)
 			}
 		}
 	} else {
 		availableThemes = foundThemes
 	}
-	sort.Strings(availableThemes)
+	sort.Slice(availableThemes, func(i, j int) bool {
+		if availableThemes[i].InternalName == setting.UI.DefaultTheme {
+			return true
+		}
+		return availableThemes[i].DisplayName < availableThemes[j].DisplayName
+	})
 	if len(availableThemes) == 0 {
 		setting.LogStartupProblem(1, log.ERROR, "No theme candidate in asset files, but Gitea requires there should be at least one usable theme")
-		availableThemes = []string{setting.UI.DefaultTheme}
+		availableThemes = []*ThemeMetaInfo{defaultThemeMetaInfoByInternalName(setting.UI.DefaultTheme)}
 	}
 }
 
-func GetAvailableThemes() []string {
+func GetAvailableThemes() []*ThemeMetaInfo {
 	themeOnce.Do(initThemes)
 	return availableThemes
 }
 
-func IsThemeAvailable(name string) bool {
+func IsThemeAvailable(internalName string) bool {
 	themeOnce.Do(initThemes)
-	return availableThemesSet.Contains(name)
+	return availableThemeInternalNames.Contains(internalName)
 }

services/webtheme/webtheme_test.go

@@ -0,0 +1,42 @@
+// Copyright 2024 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package webtheme
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestParseThemeMetaInfoToMap(t *testing.T) {
+	assert.Equal(t, parseThemeMetaInfoToMap(`
+		:root {
+			--theme-display-name: unused;
+		  --theme-display-name: "Dark (Red/Green Colorblind-Friendly)";
+		  --is-dark-theme: true;
+		  --color-diff-added-word-bg: #388bfd66;
+		  --color-diff-added-row-bg: #388bfd26;
+		}
+	`), map[string]string{
+		"--theme-display-name": "Dark (Red/Green Colorblind-Friendly)",
+		"--is-dark-theme":      "true",
+	})
+
+	assert.Equal(t, parseThemeMetaInfoToMap(`
+		:root {
+			--theme-display-name: unused;
+			--is-dark-theme: "true";
+		}
+		:root {
+			--theme-display-name: "unused2";
+			--is-dark-theme: "false";
+		}
+		:root {
+			--theme-display-name: Light;
+		}
+	`), map[string]string{
+		"--theme-display-name": "Light",
+		"--is-dark-theme":      "false",
+	})
+}

templates/user/settings/appearance.tmpl

@@ -18,7 +18,7 @@
 					<label>{{ctx.Locale.Tr "settings.ui"}}</label>
 					<select name="theme" class="ui dropdown">
 						{{range $theme := .AllThemes}}
-						<option value="{{$theme}}" {{Iif (eq $.SignedUser.Theme $theme) "selected"}}>{{$theme}}</option>
+						<option value="{{$theme.InternalName}}" {{Iif (eq $.SignedUser.Theme $theme.InternalName) "selected"}}>{{$theme.DisplayName}}</option>
 						{{end}}
 					</select>
 				</div>

web_src/css/themes/theme-gitea-auto.css

@@ -1,2 +1,6 @@
 @import "./theme-gitea-light.css" (prefers-color-scheme: light);
 @import "./theme-gitea-dark.css" (prefers-color-scheme: dark);
+
+:root {
+  --theme-display-name: "Auto";
+}

web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css

@@ -3,6 +3,7 @@
 /* red/green colorblind-friendly colors */
 /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
 :root {
+  --theme-display-name: "Dark (Red/Green Colorblind-Friendly)";
   --color-diff-added-word-bg: #388bfd66;
   --color-diff-added-row-bg: #388bfd26;
 

web_src/css/themes/theme-gitea-dark.css

@@ -2,6 +2,7 @@
 @import "../codemirror/dark.css";
 
 :root {
+  --theme-display-name: "Dark";
   --is-dark-theme: true;
   --color-primary: #4183c4;
   --color-primary-contrast: #ffffff;

web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css

@@ -3,6 +3,7 @@
 /* red/green colorblind-friendly colors */
 /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
 :root {
+  --theme-display-name: "Light (Red/Green Colorblind-Friendly)";
   --color-diff-added-word-bg: #54aeff66;
   --color-diff-added-row-bg: #ddf4ff80;
 

web_src/css/themes/theme-gitea-light.css

@@ -2,6 +2,7 @@
 @import "../codemirror/light.css";
 
 :root {
+  --theme-display-name: "Light";
   --is-dark-theme: false;
   --color-primary: #4183c4;
   --color-primary-contrast: #ffffff;