Add theme selector button to footer

Author: silverwind

modules/templates/helper.go

@@ -138,6 +138,20 @@ func NewFuncMap() template.FuncMap {
 			}
 			return user.Theme
 		},
+		"ThemeIcon": func(theme string) string {
+			if theme == "gitea-dark" {
+				return "octicon-moon"
+			} else if theme == "gitea-light" {
+				return "octicon-sun"
+			} else if theme == "gitea-auto" {
+				return "gitea-eclipse"
+			} else {
+				return "octicon-paintbrush"
+			}
+		},
+		"Themes": func() []string {
+			return setting.UI.Themes
+		},
 		"NotificationSettings": func() map[string]any {
 			return map[string]any{
 				"MinTimeout":            int(setting.UI.Notification.MinTimeout / time.Millisecond),

public/assets/img/svg/gitea-eclipse.svg

@@ -629,7 +629,7 @@ func registerRoutes(m *web.Route) {
 			})
 			addWebhookEditRoutes()
 		}, webhooksEnabled)
-	}, reqSignIn, ctxDataSet("PageIsUserSettings", true, "AllThemes", setting.UI.Themes, "EnablePackages", setting.Packages.Enabled))
+	}, reqSignIn, ctxDataSet("PageIsUserSettings", true, "EnablePackages", setting.Packages.Enabled))
 
 	m.Group("/user", func() {
 		m.Get("/activate", auth.Activate)

routers/web/web.go

@@ -15,6 +15,17 @@
 		{{end}}
 	</div>
 	<div class="right-links" role="group" aria-label="{{ctx.Locale.Tr "aria.footer.links"}}">
+		<div class="ui dropdown upward">
+			{{$currentTheme := ThemeName .SignedUser}}
+			<span class="flex-text-inline">{{svg (ThemeIcon $currentTheme) 14}} {{$currentTheme}}</span>
+			<div class="menu theme-menu">
+				{{range Themes}}
+					<a data-value="{{.}}" class="item {{if eq $currentTheme .}}active selected{{end}}">
+						{{svg (ThemeIcon .) 14}} {{.}}
+					</a>
+				{{end}}
+			</div>
+		</div>
 		<div class="ui dropdown upward language">
 			<span class="flex-text-inline">{{svg "octicon-globe" 14}} {{ctx.Locale.LangName}}</span>
 			<div class="menu language-menu">

templates/base/footer_content.tmpl

@@ -13,21 +13,17 @@
 
 			<form class="ui form" action="{{.Link}}/theme" method="post">
 				{{.CsrfTokenHtml}}
+				{{$currentTheme := ThemeName .SignedUser}}
 					<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}}">
+							<input name="theme" type="hidden" value="{{$currentTheme}}">
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-							<div class="text">
-								{{range $i,$a := .AllThemes}}
-									{{if eq $.SignedUser.Theme $a}}{{$a}}{{end}}
-								{{end}}
-							</div>
-
+							<div class="text">{{$currentTheme}}</div>
 							<div class="menu">
-							{{range $i,$a := .AllThemes}}
-								<div class="item{{if eq $.SignedUser.Theme $a}} active selected{{end}}" data-value="{{$a}}">
-									{{$a}}
+							{{range Themes}}
+								<div class="item{{if eq $currentTheme .}} active selected{{end}}" data-value="{{.}}">
+									{{.}}
 								</div>
 							{{end}}
 							</div>

templates/user/settings/appearance.tmpl

@@ -67,10 +67,10 @@
   justify-content: center;
 }
 
-.page-footer .right-links > a {
+.page-footer .right-links > * + * {
   border-left: 1px solid var(--color-secondary-dark-1);
-  padding-left: 8px;
-  margin-left: 5px;
+  padding-left: 7px;
+  margin-left: 7px;
 }
 
 .page-footer .ui.dropdown.language .menu {

web_src/css/home.css

@@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
 import {request} from '../modules/fetch.js';
+import {POST} from '../modules/fetch.js';
 
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
 
@@ -35,15 +36,18 @@ export function initHeadNavbarContentToggle() {
   });
 }
 
-export function initFootLanguageMenu() {
-  function linkLanguageAction() {
-    const $this = $(this);
-    $.get($this.data('url')).always(() => {
+export function initFooterMenus() {
+  $('.language-menu a[lang]').on('click', function() {
+    $.get($(this).data('url')).always(() => {
       window.location.reload();
     });
-  }
-
-  $('.language-menu a[lang]').on('click', linkLanguageAction);
+  });
+  $('.theme-menu .item').on('click', async (e) => {
+    const res = await POST(`${appSubUrl}/user/settings/appearance/theme`, {
+      data: new URLSearchParams({theme: e.target.getAttribute('data-value')}),
+    });
+    if (res.ok) window.location.reload();
+  });
 }
 
 

web_src/js/features/common-global.js

@@ -39,7 +39,7 @@ import {
   initCommitStatuses,
 } from './features/repo-commit.js';
 import {
-  initFootLanguageMenu,
+  initFooterMenus,
   initGlobalButtonClickOnEnter,
   initGlobalButtons,
   initGlobalCommon,
@@ -111,7 +111,7 @@ onDomReady(() => {
   initInstall();
 
   initHeadNavbarContentToggle();
-  initFootLanguageMenu();
+  initFooterMenus();
 
   initCommentContent();
   initContextPopups();