feat(hub): add dark/light theme toggle with moon and sun icons

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-04 12:03:48 +08:00
parent b394e495ca
commit d1914df46f
6 changed files with 327 additions and 19 deletions
+21 -2
View File
@@ -1,7 +1,8 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="utf-8" />
<script src="/assets/theme.js?v=20260604-hub-theme"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0b0e18" />
<meta name="apple-mobile-web-app-title" content="中控" />
@@ -10,10 +11,25 @@
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
<link rel="manifest" href="/assets/icons/manifest.webmanifest" />
<title>登录 · 复盘系统中控</title>
<link rel="stylesheet" href="/assets/app.css?v=20260530-hub-embed-login" />
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-theme" />
</head>
<body class="login-page">
<div class="login-bg" aria-hidden="true"></div>
<div class="login-theme-bar">
<div class="theme-toggle" role="group" aria-label="界面主题">
<button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/>
</svg>
</button>
<button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
</svg>
</button>
</div>
</div>
<div class="login-panel">
<div class="login-brand">
<span class="brand-mark"></span>
@@ -143,6 +159,9 @@
submitBtn.textContent = oldLabel;
});
})();
if (window.HubTheme && typeof HubTheme.initToggleUI === "function") {
HubTheme.initToggleUI();
}
</script>
</body>
</html>