登录页加入暗色模式切换

2026-07-24 22:18:00 +08:00
parent c628e208ca
commit 561f3332b4
1 changed files with 32 additions and 0 deletions
@@ -43,9 +43,17 @@
    background: #fef2f2; color: var(--danger); padding: 10px 14px;
    border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px; text-align: center;
  }
+  .toggle-btn {
+    position: fixed; top: 16px; right: 24px;
+    background: var(--surface); border: 1px solid var(--border);
+    color: var(--fg); padding: 6px 14px; border-radius: 6px;
+    cursor: pointer; font-size: 0.82rem; z-index: 10;
+  }
+  .toggle-btn:hover { opacity: 0.8; }
 </style>
 </head>
 <body>
+<button class="toggle-btn" id="themeToggle">🌙 暗色模式</button>
 <div class="login-box">
  <h1>📊 期货量化系统</h1>
  <p class="sub">请输入账号密码</p>
@@ -66,5 +74,29 @@
    <button type="submit" class="btn">登 录</button>
  </form>
 </div>
+
+<script>
+var themeBtn = document.getElementById('themeToggle');
+themeBtn.addEventListener('click', toggleTheme);
+function setTheme(dark) {
+  if (dark) {
+    document.documentElement.setAttribute('data-theme', 'dark');
+    themeBtn.textContent = '☀️ 亮色模式';
+  } else {
+    document.documentElement.removeAttribute('data-theme');
+    themeBtn.textContent = '🌙 暗色模式';
+  }
+  try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
+}
+function toggleTheme() {
+  setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
+}
+(function() {
+  try {
+    var s = localStorage.getItem('ft-theme');
+    if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
+  } catch(e) {}
+})();
+</script>
 </body>
 </html>