diff --git a/frontend/app.js b/frontend/app.js index 47ec0c2..42d8d88 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -288,12 +288,24 @@ createApp({ methods: { // ========== 主题管理 ========== // 初始化主题 - initTheme() { + async initTheme() { // 先从localStorage读取,避免页面闪烁 const savedTheme = localStorage.getItem('theme'); if (savedTheme) { this.applyTheme(savedTheme); } + // 如果没有登录,从公开API获取全局主题 + if (!this.token) { + try { + const res = await axios.get(`${this.apiBase}/api/public/theme`); + if (res.data.success) { + this.globalTheme = res.data.theme; + this.applyTheme(res.data.theme); + } + } catch (e) { + console.log('无法加载全局主题'); + } + } }, // 加载用户主题设置(登录后调用) diff --git a/frontend/index.html b/frontend/index.html index 8270ff1..905fb18 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -22,6 +22,7 @@ box-sizing: border-box; } + /* 暗色主题(默认) */ :root { --bg-primary: #0a0a0f; --bg-secondary: #12121a; @@ -35,6 +36,43 @@ --glow: rgba(102, 126, 234, 0.4); } + /* 亮色主题 */ + .light-theme { + --bg-primary: #f0f4f8; + --bg-secondary: #ffffff; + --glass: rgba(102, 126, 234, 0.05); + --glass-border: rgba(102, 126, 234, 0.15); + --text-primary: #1a1a2e; + --text-secondary: rgba(26, 26, 46, 0.7); + --accent-1: #5a67d8; + --accent-2: #6b46c1; + --accent-3: #d53f8c; + --glow: rgba(90, 103, 216, 0.3); + } + + /* 亮色主题特定样式 */ + body.light-theme .navbar { + background: rgba(255, 255, 255, 0.85); + } + + body.light-theme .grid-bg { + background-image: + linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px); + } + + body.light-theme .gradient-orb { + opacity: 0.3; + } + + body.light-theme .feature-card { + background: rgba(255, 255, 255, 0.7); + } + + body.light-theme .tech-bar { + background: rgba(255, 255, 255, 0.8); + } + body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); @@ -610,5 +648,20 @@ 玩玩云 © 2025 + +