diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 0614bcf167..d8e3f90777 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -812,6 +812,10 @@ manage_themes = Default theme
 manage_openid = OpenID addresses
 email_desc = Your primary email address will be used for notifications, password recovery and, provided that it is not hidden, web-based Git operations.
 theme_desc = This theme will be used for the web interface when you are logged in.
+theme_recommended = Recommended
+theme_light = Light
+theme_dark = Dark
+theme_auto = Auto (per system)
 primary = Primary
 activated = Activated
 requires_activation = Requires activation
diff --git a/routers/web/user/setting/profile.go b/routers/web/user/setting/profile.go
index e0ce88b582..d76dfc111a 100644
--- a/routers/web/user/setting/profile.go
+++ b/routers/web/user/setting/profile.go
@@ -19,6 +19,7 @@ import (
 	"forgejo.org/models/db"
 	"forgejo.org/models/organization"
 	repo_model "forgejo.org/models/repo"
+	"forgejo.org/models/theme"
 	user_model "forgejo.org/models/user"
 	"forgejo.org/modules/base"
 	"forgejo.org/modules/log"
@@ -335,15 +336,15 @@ func Repos(ctx *context.Context) {
 func Appearance(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("settings.appearance")
 	ctx.Data["PageIsSettingsAppearance"] = true
-	ctx.Data["AllThemes"] = setting.UI.Themes
-	ctx.Data["ThemeName"] = func(themeName string) string {
-		fullThemeName := "themes.names." + themeName
-		if ctx.Locale.HasKey(fullThemeName) {
-			return ctx.Locale.TrString(fullThemeName)
-		}
-		return themeName
+
+	themes, err := theme.GetThemes()
+	if err != nil {
+		ctx.ServerError("Failed to load themes", err)
+		return
 	}
 
+	ctx.Data["AllThemes"] = themes
+
 	var hiddenCommentTypes *big.Int
 	val, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyHiddenCommentTypes)
 	if err != nil {
diff --git a/templates/user/settings/appearance.tmpl b/templates/user/settings/appearance.tmpl
index df4d6f3999..a0db0eb9c6 100644
--- a/templates/user/settings/appearance.tmpl
+++ b/templates/user/settings/appearance.tmpl
@@ -7,37 +7,64 @@
 		</h4>
 		<div class="ui attached segment">
 			<div class="ui email list">
-				<div class="item">
-					{{ctx.Locale.Tr "settings.theme_desc"}}
-				</div>
-
-			<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">
-							<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}}{{call $.ThemeName $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}}">
-									{{call $.ThemeName $a}}
-								</div>
-							{{end}}
-							</div>
-						</div>
+				{{$theme := index .AllThemes $.SignedUser.Theme}}
+				{{if $theme.Author}}
+					<div class="item">
+						<p>
+							<strong>{{$theme.Name}}</strong>
+							by <em><a href="{{$theme.Url}}">{{$theme.Author}}</a></em> {{if $theme.Recommended}}<span data-tooltip-content="{{ctx.Locale.Tr "settings.theme_recommended"}}">{{svg "octicon-verified" 16 "dropdown icon"}}</span>{{end}}
+						</p>
+						{{if $theme.Description}}
+							<p><em>"{{$theme.Description}}"</em></p>
+						{{end}}
 					</div>
 
-				<div class="field">
-					<button class="ui primary button">{{ctx.Locale.Tr "settings.update_theme"}}</button>
-				</div>
-			</form>
+					<div class="item tw-mb-auto">
+						{{ctx.Locale.Tr "settings.theme_desc"}}
+					</div>
+				{{else}}
+					<div class="item tw-mb-4">
+						{{ctx.Locale.Tr "settings.theme_desc"}}
+					</div>
+				{{end}}
+
+				<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">
+								<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 $i}}{{$a.Name}}{{end}}
+									{{- end -}}
+								</div>
+
+								<div class="menu">
+								{{range $i,$a := .AllThemes}}
+									<div class="item{{if eq $.SignedUser.Theme $i}} active selected{{end}} tw-flex" data-value="{{$i}}">
+										{{$a.Name}}
+										{{if $a.Recommended}}
+											<span data-tooltip-content="{{ctx.Locale.Tr "settings.theme_recommended"}}">{{svg "octicon-verified" 16 "dropdown icon"}}</span>
+										{{end}}
+										{{if eq $a.Scheme "auto"}}
+											<span data-tooltip-content="{{ctx.Locale.Tr "settings.theme_auto"}}">{{svg "octicon-sync" 16 "dropdown icon"}}</span>
+										{{else if eq $a.Scheme "dark"}}
+											<span data-tooltip-content="{{ctx.Locale.Tr "settings.theme_dark"}}">{{svg "octicon-moon" 16 "dropdown icon"}}</span>
+										{{else if eq $a.Scheme "light"}}
+											<span data-tooltip-content="{{ctx.Locale.Tr "settings.theme_light"}}">{{svg "octicon-sun" 16 "dropdown icon"}}</span>
+										{{end}}
+									</div>
+								{{end}}
+								</div>
+							</div>
+						</div>
+
+					<div class="field">
+						<button class="ui primary button">{{ctx.Locale.Tr "settings.update_theme"}}</button>
+					</div>
+				</form>
 			</div>
 		</div>