feat: 添加主题切换按钮并更新导航栏样式

styles/components/navbar.ts

@@ -10,6 +10,25 @@ export const navbarRight = `
     .navbar-right {
       min-height: 48px;
     }
+    .navbar-right {
+      gap: 8px;
+      > .navbar-theme-toggle {
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--color-light-border);
+        border-radius: var(--border-radius);
+        color: var(--color-text);
+        height: 32px;
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0;
+        width: 32px;
+        &:hover,
+        &.active {
+          background-color: var(--color-nav-hoverBg);
+        }
+      }
+    }
     .navbar-left {
       gap: 8px;
       > .item {
@@ -35,7 +54,7 @@ export const navbarRight = `
     .navbar-right:has(.user-menu) {
       gap: 8px;
       /* 右侧按钮, 但不包括头像 */
-      > .item:not(:last-child) {
+      > .item:not(.navbar-user-menu):not(.navbar-theme-toggle) {
         align-items: center;
         justify-content: center;
         gap: 4px;
@@ -75,7 +94,7 @@ export const navbarRight = `
       }
       .item.ui.dropdown {
         /* 头像菜单 */
-        &:last-child {
+        &.navbar-user-menu {
           padding: 0;
           .text {
             /* 不显示头像右侧的小箭头下拉菜单标识 */

templates/base/head_navbar.tmpl

@@ -29,7 +29,8 @@
 	<!-- the full dropdown menus -->
 	<div class="navbar-right">
 		{{if and .IsSigned .MustChangePassword}}
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
+			{{template "base/theme_toggle" .}}
+			<div class="ui dropdown jump item navbar-user-menu" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
 				<span class="text">
 					{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
 					<span class="only-mobile">{{.SignedUser.Name}}</span>
@@ -72,7 +73,8 @@
 			</div><!-- end dropdown menu create new -->
 			{{template "base/head_navbar_icons" dict "ItemExtraClass" "not-mobile" "PageGlobalData" .PageGlobalData "ShowMilestonesDashboardPage" .ShowMilestonesDashboardPage}}
 
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
+			{{template "base/theme_toggle" .}}
+			<div class="ui dropdown jump item navbar-user-menu" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
 				<span class="text tw-flex tw-items-center">
 					<span class="navbar-avatar">
 						{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-2"}}
@@ -134,6 +136,7 @@
 				{{svg "octicon-sign-in"}}
 				<span class="tw-ml-1">{{ctx.Locale.Tr "sign_in"}}</span>
 			</a>
+			{{template "base/theme_toggle" .}}
 		{{end}}
 	</div><!-- end full right menu -->
 
@@ -165,4 +168,21 @@
 		</div>
 	{{end}}
 </nav>
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+	const toggle = document.querySelector(".navbar-theme-toggle");
+	if (!toggle) return;
+	toggle.addEventListener("click", async () => {
+		const current = toggle.getAttribute("data-current-theme");
+		const light = toggle.getAttribute("data-light-theme");
+		const dark = toggle.getAttribute("data-dark-theme");
+		const next = current === dark ? light : dark;
+		await fetch(`{{AppSubUrl}}/-/web-theme/apply?theme=${encodeURIComponent(next)}`, {
+			method: "POST",
+			headers: {"X-Csrf-Token": "{{ctx.CsrfToken}}"},
+		});
+		window.location.reload();
+	});
+});
+</script>
 {{template "base/head_banner"}}

templates/base/theme_toggle.tmpl

@@ -0,0 +1,15 @@
+<button
+	type="button"
+	class="item ui icon mini button tw-m-0 navbar-theme-toggle"
+	data-current-theme="{{ctx.CurrentWebTheme.InternalName}}"
+	data-light-theme="github-dev"
+	data-dark-theme="github-dev-dark"
+	data-tooltip-content="{{ctx.Locale.Tr "settings.manage_themes"}}"
+	aria-label="{{ctx.Locale.Tr "settings.manage_themes"}}"
+>
+	{{if eq ctx.CurrentWebTheme.InternalName "github-dev-dark"}}
+		{{svg "octicon-sun" 16}}
+	{{else}}
+		{{svg "octicon-moon" 16}}
+	{{end}}
+</button>