Improve theme picker

Signed-off-by: Minecon724 <minecon724@noreply.git.m724.eu>

modules/theme/theme.go

@@ -16,6 +16,8 @@ const (
 	key string = "load-themes"
 )
 
+var FriendlyThemes map[string]string
+
 var (
 	group   singleflight.Group
 	assetFs *assetfs.LayeredFS
@@ -42,6 +44,7 @@ func LoadThemes() error {
 			group.Forget(key)
 		} else {
 			setting.UI.Themes = themes
+			FriendlyThemes = convertToFriendly(themes)
 			loaded = true
 		}
 
@@ -78,3 +81,20 @@ func loadThemesInner(assetFs *assetfs.LayeredFS) ([]string, error) {
 		return nil, fmt.Errorf("no themes found")
 	}
 }
+
+func convertToFriendly(themes []string) map[string]string {
+	themesFriendly := make(map[string]string)
+
+	for _, theme := range themes {
+		friendly := theme
+
+		friendly = strings.ReplaceAll(friendly, "-", " ")
+
+		friendly = strings.ToLower(friendly)
+		friendly = strings.Title(friendly)
+
+		themesFriendly[theme] = friendly
+	}
+
+	return themesFriendly
+}

routers/web/user/setting/profile.go

@@ -332,6 +332,7 @@ func Appearance(ctx *context.Context) {
 	}
 
 	ctx.Data["AllThemes"] = setting.UI.Themes
+	ctx.Data["FriendlyThemes"] = theme.FriendlyThemes
 
 	ctx.Data["Title"] = ctx.Tr("settings.appearance")
 	ctx.Data["PageIsSettingsAppearance"] = true

templates/user/settings/appearance.tmpl

@@ -15,20 +15,19 @@
 			<form class="ui form" action="{{.Link}}/theme" method="post">
 				{{.CsrfTokenHtml}}
 					<div class="field">
-						<label for="ui">{{ctx.Locale.Tr "settings.ui"}}</label>
-						<div class="ui selection dropdown" id="ui">
+						<div class="ui search selection dropdown" id="ui">
 							<input name="theme" type="hidden" value="{{.SignedUser.Theme}}">
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="text">
 								{{range $i,$a := .AllThemes}}
-									{{if eq $.SignedUser.Theme $a}}{{$a}}{{end}}
+									{{if eq $.SignedUser.Theme $a}}{{index $.FriendlyThemes $a}}{{end}}
 								{{end}}
 							</div>
 
 							<div class="menu">
 							{{range $i,$a := .AllThemes}}
 								<div class="item{{if eq $.SignedUser.Theme $a}} active selected{{end}}" data-value="{{$a}}">
-									{{$a}}
+										{{index $.FriendlyThemes $a}}
 								</div>
 							{{end}}
 							</div>
@@ -53,7 +52,7 @@
 				</div>
 				{{.CsrfTokenHtml}}
 				<div class="field">
-					<div class="ui language selection dropdown" id="language">
+					<div class="ui search language selection dropdown" id="language">
 						<input name="language" type="hidden" value="{{.SignedUser.Language}}">
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="text">{{range .AllLangs}}{{if eq $.SignedUser.Language .Lang}}{{.Name}}{{end}}{{end}}</div>