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();