feat: 增加暗黑主题切换功能 🌙

- CSS 变量实现主题切换
- 右上角切换按钮
- 本地存储记住主题偏好
- 平滑过渡动画
- 所有页面支持暗黑模式

static/css/style.css

@@ -4,24 +4,61 @@
     box-sizing: border-box;
 }
 
+:root {
+    --bg-gradient-start: #667eea;
+    --bg-gradient-end: #764ba2;
+    --card-bg: rgba(255, 255, 255, 0.95);
+    --text-primary: #333;
+    --text-secondary: #666;
+    --text-muted: #999;
+    --accent-color: #667eea;
+    --border-color: #eee;
+    --input-bg: white;
+    --input-border: #eee;
+    --flash-success-bg: #d4edda;
+    --flash-success-text: #155724;
+    --flash-error-bg: #f8d7da;
+    --flash-error-text: #721c24;
+}
+
+[data-theme="dark"] {
+    --bg-gradient-start: #1a1a2e;
+    --bg-gradient-end: #16213e;
+    --card-bg: rgba(30, 30, 46, 0.95);
+    --text-primary: #e0e0e0;
+    --text-secondary: #b0b0b0;
+    --text-muted: #808080;
+    --accent-color: #a78bfa;
+    --border-color: #3a3a5a;
+    --input-bg: #2a2a3a;
+    --input-border: #4a4a6a;
+    --flash-success-bg: #1a3a2a;
+    --flash-success-text: #6ee7b7;
+    --flash-error-bg: #3a1a1a;
+    --flash-error-text: #f87171;
+}
+
 body {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    transition: background 0.3s ease;
 }
 
 .container {
     text-align: center;
     padding: 60px 40px;
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--card-bg);
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     max-width: 600px;
     width: 90%;
     animation: fadeIn 0.6s ease-out;
+    position: relative;
+    transition: background 0.3s ease;
 }
 
 @keyframes fadeIn {
@@ -38,7 +75,7 @@ body {
 .avatar {
     width: 120px;
     height: 120px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
     border-radius: 50%;
     margin: 0 auto 30px;
     display: flex;
@@ -47,27 +84,31 @@ body {
     font-size: 60px;
     color: white;
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+    transition: all 0.3s ease;
 }
 
 h1 {
     font-size: 42px;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 15px;
     font-weight: 700;
+    transition: color 0.3s ease;
 }
 
 .welcome {
     font-size: 24px;
-    color: #667eea;
+    color: var(--accent-color);
     margin-bottom: 25px;
     font-weight: 500;
+    transition: color 0.3s ease;
 }
 
 .message {
     font-size: 16px;
-    color: #666;
+    color: var(--text-secondary);
     line-height: 1.8;
     margin-bottom: 30px;
+    transition: color 0.3s ease;
 }
 
 .auth-buttons {
@@ -90,7 +131,7 @@ h1 {
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
     color: white;
 }
 
@@ -100,13 +141,13 @@ h1 {
 }
 
 .btn-secondary {
-    background: white;
+    background: var(--card-bg);
-    color: #667eea;
+    color: var(--accent-color);
-    border: 2px solid #667eea;
+    border: 2px solid var(--accent-color);
 }
 
 .btn-secondary:hover {
-    background: #667eea;
+    background: var(--accent-color);
     color: white;
 }
 
@@ -126,14 +167,15 @@ h1 {
 
 .footer {
     font-size: 14px;
-    color: #999;
+    color: var(--text-muted);
     padding-top: 20px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color);
     margin-top: 20px;
+    transition: all 0.3s ease;
 }
 
 .footer span {
-    color: #667eea;
+    color: var(--accent-color);
     font-weight: 600;
 }
 
@@ -146,6 +188,28 @@ h1 {
     50% { opacity: 0.5; }
 }
 
+/* 主题切换按钮 */
+.theme-toggle {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: none;
+    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.theme-toggle:hover {
+    transform: rotate(20deg) scale(1.1);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
 /* 表单样式 */
 .auth-container {
     max-width: 400px;
@@ -158,25 +222,31 @@ h1 {
 .form-group input {
     width: 100%;
     padding: 15px 20px;
-    border: 2px solid #eee;
+    border: 2px solid var(--input-border);
     border-radius: 25px;
     font-size: 16px;
-    transition: border-color 0.3s ease;
+    transition: all 0.3s ease;
     outline: none;
+    background: var(--input-bg);
+    color: var(--text-primary);
 }
 
 .form-group input:focus {
-    border-color: #667eea;
+    border-color: var(--accent-color);
+}
+
+.form-group input::placeholder {
+    color: var(--text-muted);
 }
 
 .auth-link {
     margin-top: 20px;
-    color: #666;
+    color: var(--text-secondary);
     font-size: 14px;
 }
 
 .auth-link a {
-    color: #667eea;
+    color: var(--accent-color);
     text-decoration: none;
     font-weight: 600;
 }
@@ -187,21 +257,21 @@ h1 {
 
 /* 消息提示 */
 .flash-success {
-    background: #d4edda;
+    background: var(--flash-success-bg);
-    color: #155724;
+    color: var(--flash-success-text);
     padding: 12px 20px;
     border-radius: 10px;
     margin-bottom: 20px;
-    border: 1px solid #c3e6cb;
+    border: 1px solid transparent;
 }
 
 .flash-error {
-    background: #f8d7da;
+    background: var(--flash-error-bg);
-    color: #721c24;
+    color: var(--flash-error-text);
     padding: 12px 20px;
     border-radius: 10px;
     margin-bottom: 20px;
-    border: 1px solid #f5c6cb;
+    border: 1px solid transparent;
 }
 
 .flash-messages {
@@ -232,4 +302,12 @@ h1 {
     .btn {
         width: 100%;
     }
+    
+    .theme-toggle {
+        top: 10px;
+        right: 10px;
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
 }

static/js/theme.js

@@ -0,0 +1,60 @@
+/**
+ * 暗黑主题切换功能
+ * 小白制作 🐶
+ */
+
+(function() {
+    const themeKey = 'my_one_web_theme';
+    
+    // 获取保存的主题
+    function getSavedTheme() {
+        return localStorage.getItem(themeKey) || 'light';
+    }
+    
+    // 保存主题
+    function saveTheme(theme) {
+        localStorage.setItem(themeKey, theme);
+    }
+    
+    // 应用主题
+    function applyTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        updateToggleButton(theme);
+    }
+    
+    // 更新切换按钮图标
+    function updateToggleButton(theme) {
+        const btn = document.querySelector('.theme-toggle');
+        if (btn) {
+            btn.textContent = theme === 'dark' ? '☀️' : '🌙';
+            btn.setAttribute('aria-label', theme === 'dark' ? '切换到亮色模式' : '切换到暗黑模式');
+        }
+    }
+    
+    // 切换主题
+    function toggleTheme() {
+        const currentTheme = getSavedTheme();
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        saveTheme(newTheme);
+        applyTheme(newTheme);
+    }
+    
+    // 初始化主题
+    function initTheme() {
+        const savedTheme = getSavedTheme();
+        applyTheme(savedTheme);
+        
+        // 绑定切换按钮事件
+        const btn = document.querySelector('.theme-toggle');
+        if (btn) {
+            btn.addEventListener('click', toggleTheme);
+        }
+    }
+    
+    // DOM 加载完成后初始化
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initTheme);
+    } else {
+        initTheme();
+    }
+})();

templates/index.html

@@ -8,6 +8,7 @@
 </head>
 <body>
     <div class="container">
+        <button class="theme-toggle" aria-label="切换主题">🌙</button>
         <div class="avatar">
             <span class="sparkle">👋</span>
         </div>
@@ -26,5 +27,6 @@
             Powered by <span>Flask</span> & <span>OpenClaw</span>
         </div>
     </div>
+    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
 </body>
 </html>

templates/login.html

@@ -8,6 +8,7 @@
 </head>
 <body>
     <div class="container auth-container">
+        <button class="theme-toggle" aria-label="切换主题">🌙</button>
         <div class="avatar">
             <span>🔐</span>
         </div>
@@ -42,5 +43,6 @@
             Powered by <span>Flask</span> & <span>OpenClaw</span>
         </div>
     </div>
+    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
 </body>
 </html>

templates/register.html

@@ -8,6 +8,7 @@
 </head>
 <body>
     <div class="container auth-container">
+        <button class="theme-toggle" aria-label="切换主题">🌙</button>
         <div class="avatar">
             <span>📝</span>
         </div>
@@ -45,5 +46,6 @@
             Powered by <span>Flask</span> & <span>OpenClaw</span>
         </div>
     </div>
+    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
 </body>
 </html>

templates/welcome.html

@@ -8,6 +8,7 @@
 </head>
 <body>
     <div class="container">
+        <button class="theme-toggle" aria-label="切换主题">🌙</button>
         <div class="avatar">
             <span class="sparkle">🎉</span>
         </div>
@@ -35,5 +36,7 @@
             </div>
         {% endif %}
     {% endwith %}
+    
+    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
 </body>
 </html>