From 2c150e7313843e1f2f174c650512a5f7b55596f1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 11 Oct 2023 08:55:02 +0200
Subject: [PATCH 1/3] Add theme selector button to footer

---
 modules/templates/helper.go             | 14 ++++++++++++++
 public/assets/img/svg/gitea-eclipse.svg |  1 +
 routers/web/web.go                      |  2 +-
 templates/base/footer_content.tmpl      | 11 +++++++++++
 templates/user/settings/appearance.tmpl | 16 ++++++----------
 web_src/css/home.css                    |  6 +++---
 web_src/js/features/common-global.js    | 18 +++++++++++-------
 web_src/js/index.js                     |  4 ++--
 web_src/svg/gitea-eclipse.svg           |  1 +
 9 files changed, 50 insertions(+), 23 deletions(-)
 create mode 100644 public/assets/img/svg/gitea-eclipse.svg
 create mode 100644 web_src/svg/gitea-eclipse.svg

diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 235fd96b73d8f..5b2e6fc02a091 100644
--- a/modules/templates/helper.go
+++ b/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),
diff --git a/public/assets/img/svg/gitea-eclipse.svg b/public/assets/img/svg/gitea-eclipse.svg
new file mode 100644
index 0000000000000..7312c330ffed4
--- /dev/null
+++ b/public/assets/img/svg/gitea-eclipse.svg
@@ -0,0 +1 @@
+<svg viewBox="490 490 820 820" class="svg gitea-eclipse" xmlns="http://www.w3.org/2000/svg" width="16" height="16" aria-hidden="true"><path d="M866.7 582.1A321.3 321.3 0 0 0 738.6 623a317.3 317.3 0 0 0-109.1 108.5A418 418 0 0 0 609 772a335.3 335.3 0 0 0-19.6 71.5 205.2 205.2 0 0 0-2.8 45c0 25.8.2 29.3 2.8 45 4.1 25.4 9.9 46.4 19.6 71.5a314.2 314.2 0 0 0 111.6 137.3A306.8 306.8 0 0 0 893 1196a308.6 308.6 0 0 0 303.6-262.5c2.6-15.7 2.8-19.2 2.8-45s-.2-29.3-2.8-45A335.3 335.3 0 0 0 1177 772a314.2 314.2 0 0 0-111.6-137.3A308.3 308.3 0 0 0 918 582c-13-1.1-38.2-1.1-51.3.1zM747 663.5l-2.4 16.7c-4 26.4-4.9 41.1-4.3 65.3a323.7 323.7 0 0 0 37.2 145c18.2 36 41.3 66.6 72 95.5a346.4 346.4 0 0 0 208.5 93.1l18 1.6 4.5.5-8.5 8a259.3 259.3 0 0 1-141.5 65.8 281 281 0 0 1-123.9-11.4 267.2 267.2 0 0 1-181.7-269.9c2-27.6 5.7-47.6 13.3-70.7a281.2 281.2 0 0 1 46.4-85c8-10.1 28-30.2 37.9-38.1 13.8-11.1 24.5-18.3 24.5-16.4z"/></svg>
\ No newline at end of file
diff --git a/routers/web/web.go b/routers/web/web.go
index d2179a000893b..0d0eb7ad6e66d 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -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)
diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index f0a7865602f3d..e3757ece7cf09 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -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">
diff --git a/templates/user/settings/appearance.tmpl b/templates/user/settings/appearance.tmpl
index 0997d721e13ac..9c8b00f9e6731 100644
--- a/templates/user/settings/appearance.tmpl
+++ b/templates/user/settings/appearance.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>
diff --git a/web_src/css/home.css b/web_src/css/home.css
index 28992ef31f340..3e6d9625a7572 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -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 {
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index bc775ae545296..8d0bbb0e55d3b 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -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();
+  });
 }
 
 
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 7ae4b0c0c7ac2..1ebd9636a93bc 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.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();
diff --git a/web_src/svg/gitea-eclipse.svg b/web_src/svg/gitea-eclipse.svg
new file mode 100644
index 0000000000000..23de167abc907
--- /dev/null
+++ b/web_src/svg/gitea-eclipse.svg
@@ -0,0 +1 @@
+<svg viewBox="490 490 820 820"><path d="M866.7 582.1A321.3 321.3 0 0 0 738.6 623a317.3 317.3 0 0 0-109.1 108.5A418 418 0 0 0 609 772a335.3 335.3 0 0 0-19.6 71.5 205.2 205.2 0 0 0-2.8 45c0 25.8.2 29.3 2.8 45 4.1 25.4 9.9 46.4 19.6 71.5a314.2 314.2 0 0 0 111.6 137.3A306.8 306.8 0 0 0 893 1196a308.6 308.6 0 0 0 303.6-262.5c2.6-15.7 2.8-19.2 2.8-45s-.2-29.3-2.8-45A335.3 335.3 0 0 0 1177 772a314.2 314.2 0 0 0-111.6-137.3A308.3 308.3 0 0 0 918 582c-13-1.1-38.2-1.1-51.3.1zM747 663.5l-2.4 16.7c-4 26.4-4.9 41.1-4.3 65.3a323.7 323.7 0 0 0 37.2 145c18.2 36 41.3 66.6 72 95.5a346.4 346.4 0 0 0 208.5 93.1l18 1.6 4.5.5-8.5 8a259.3 259.3 0 0 1-141.5 65.8 281 281 0 0 1-123.9-11.4 267.2 267.2 0 0 1-181.7-269.9c2-27.6 5.7-47.6 13.3-70.7a281.2 281.2 0 0 1 46.4-85c8-10.1 28-30.2 37.9-38.1 13.8-11.1 24.5-18.3 24.5-16.4z"/></svg>
\ No newline at end of file

From c4de2608712fdbdddb75c32867e89efe6cbfb6c3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 11 Oct 2023 09:04:23 +0200
Subject: [PATCH 2/3] apply style to both menus

---
 web_src/css/home.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/home.css b/web_src/css/home.css
index 3e6d9625a7572..9d444fa38cb61 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -73,7 +73,7 @@
   margin-left: 7px;
 }
 
-.page-footer .ui.dropdown.language .menu {
+.page-footer .ui.dropdown .menu {
   max-height: min(500px, calc(100vh - 60px));
   overflow-y: auto;
   margin-bottom: 10px;

From 20acd7f60a20a6a544e758fdad7639dda25dbd1a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 11 Oct 2023 13:18:38 +0200
Subject: [PATCH 3/3] fix lint

---
 web_src/js/features/common-global.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 8d0bbb0e55d3b..3d694c404bc82 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -11,8 +11,7 @@ import {htmlEscape} from 'escape-goat';
 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';
+import {request, POST} from '../modules/fetch.js';
 
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;