From 62f040bb8cf5b438faabf01314190ecbef71d31c Mon Sep 17 00:00:00 2001 From: zwbcc Date: Sat, 28 Mar 2026 21:13:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A05=E5=A5=97=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=EF=BC=9A=E6=B7=B1=E9=82=83=E6=9A=97?= =?UTF-8?q?/=E7=BA=AF=E5=87=80=E7=99=BD/=E8=B5=9B=E5=8D=9A=E6=9C=8B?= =?UTF-8?q?=E5=85=8B/=E8=8E=AB=E5=85=B0=E8=BF=AA/=E6=8A=A4=E7=9C=BC?= =?UTF-8?q?=E7=BB=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 31 +++++++++++--- style.css | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++- ui.js | 18 ++++++++ 3 files changed, 162 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 83359c8..ee27660 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,31 @@ 图片生成器 - +
+
+ + + + + +
+ +
diff --git a/style.css b/style.css index 8b482a2..088824a 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,9 @@ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -:root { +/* ── Theme: 深邃暗（默认）─ */ +:root, +[data-theme="dark"] { --bg: #0f0f13; --surface: #18181f; --surface2: #1f1f28; @@ -18,6 +20,74 @@ --ease: cubic-bezier(0.16, 1, 0.3, 1); } +/* ── Theme: 纯净白 ─ */ +[data-theme="light"] { + --bg: #f5f5f7; + --surface: #ffffff; + --surface2: #f0f0f4; + --border: rgba(0,0,0,0.08); + --accent: #6c5ce7; + --accent2: #5a4bd4; + --text: #1a1a2e; + --text2: #555570; + --text3: #9999aa; + --danger: #e74c3c; + --radius: 12px; + --radius2: 8px; + --ease: cubic-bezier(0.16, 1, 0.3, 1); +} + +/* ── Theme: 赛博朋克 ─ */ +[data-theme="cyber"] { + --bg: #0a0a14; + --surface: #10102a; + --surface2: #181840; + --border: rgba(0,255,255,0.12); + --accent: #00f0ff; + --accent2: #ff00aa; + --text: #e0f8ff; + --text2: #7aaccc; + --text3: #3a5a7a; + --danger: #ff2d55; + --radius: 12px; + --radius2: 8px; + --ease: cubic-bezier(0.16, 1, 0.3, 1); +} + +/* ── Theme: 莫兰迪 ─ */ +[data-theme="morandi"] { + --bg: #e8e4df; + --surface: #f2ede8; + --surface2: #ddd8d0; + --border: rgba(0,0,0,0.08); + --accent: #9b8fa0; + --accent2: #7a6f80; + --text: #4a4540; + --text2: #7a7068; + --text3: #a09890; + --danger: #c09080; + --radius: 12px; + --radius2: 8px; + --ease: cubic-bezier(0.16, 1, 0.3, 1); +} + +/* ── Theme: 护眼绿 ─ */ +[data-theme="green"] { + --bg: #1a2416; + --surface: #222e1e; + --surface2: #2a3a24; + --border: rgba(120,200,80,0.12); + --accent: #78c850; + --accent2: #9fd878; + --text: #d4e8c0; + --text2: #90b888; + --text3: #5a7848; + --danger: #e87070; + --radius: 12px; + --radius2: 8px; + --ease: cubic-bezier(0.16, 1, 0.3, 1); +} + html, body { height: 100%; background: var(--bg); @@ -26,8 +96,11 @@ html, body { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; + transition: background 0.3s, color 0.3s; } +#app { transition: background 0.3s; } + button { cursor: pointer; font-family: inherit; } a { color: var(--accent2); text-decoration: none; } a:hover { text-decoration: underline; } @@ -50,6 +123,51 @@ header { padding: 22px 0 24px; } +.header-right { + display: flex; + align-items: center; + gap: 8px; +} + +/* ── Theme Switcher ─────────────────────────────────────────── */ + +.theme-switcher { + display: flex; + align-items: center; + gap: 2px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 24px; + padding: 3px 6px; +} + +.theme-btn { + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background: transparent; + color: var(--text3); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background 0.15s, color 0.15s, transform 0.15s; +} + +.theme-btn:hover { + color: var(--text); + background: var(--surface2); + transform: scale(1.1); +} + +.theme-btn.active { + background: var(--accent); + color: #fff; +} + +.theme-btn.active svg { stroke: #fff; fill: #fff; } + .logo { display: flex; align-items: center; diff --git a/ui.js b/ui.js index c367bc1..a19127b 100644 --- a/ui.js +++ b/ui.js @@ -282,6 +282,24 @@ saveSettingsBtn.addEventListener('click', async () => { } }); +// ── Theme switcher ───────────────────────────────────────────── + +function applyTheme(theme) { + document.documentElement.dataset.theme = theme; + localStorage.setItem('imgGen-theme', theme); + document.querySelectorAll('.theme-btn').forEach(btn => + btn.classList.toggle('active', btn.dataset.theme === theme) + ); +} + +document.querySelectorAll('.theme-btn').forEach(btn => { + btn.addEventListener('click', () => applyTheme(btn.dataset.theme)); +}); + +// Restore saved theme +const savedTheme = localStorage.getItem('imgGen-theme'); +if (savedTheme) applyTheme(savedTheme); + // ── Start ────────────────────────────────────────────────────── init();