/* ============================================================ JennyEngine X — 主题系统 通过 切换配色。 变量同时供 auth.css（登录/注册/找回）与 style.css（内部页）使用。 默认 :root = 黑色主题（与原版外观一致）。 存储方式：localStorage['je-theme']（纯前端，刷新不丢，按浏览器生效）。 配色思路（2026-07-30 重做）： - 旧版粉/紫/蓝/黄/橙过于鲜艳刺眼，本次改为「低饱和、沉稳」的莫兰迪/Refactoring-UI 风格， 主色饱和度约 45%~55%，明度适中，长时间阅读不刺眼。 - 新增独立下拉面板变量（--je-dropdown-*），保证下拉菜单与其背景始终有明显区分度。 ============================================================ */ /* ---------------- 黑色（默认） ---------------- */ :root, html[data-theme="black"] { /* 登录/通用品牌色（沿用原版纯黑调，用户偏好 #222 / #333） */ --je-primary: #111827; --je-primary-600: #1f2937; --je-primary-700: #111827; --je-grad: linear-gradient(135deg, #2b2b2b 0%, #000000 100%); --je-hero-grad: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); --je-bg: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%); --je-ink: #1f2937; --je-muted: #6b7280; --je-border: #d1d5db; --je-soft: #f8fafc; --je-shadow: 0 20px 50px rgba(17, 24, 39, 0.14); --je-shadow-sm: 0 8px 20px rgba(17, 24, 39, 0.12); /* 品牌区（深色） */ --je-hero-fg: #ffffff; --je-hero-overlay-bg: rgba(255, 255, 255, 0.12); --je-hero-overlay-border: rgba(255, 255, 255, 0.18); --je-hero-deco: rgba(255, 255, 255, 0.08); /* 输入框聚焦 / 弹层遮罩 */ --je-focus-ring: rgba(17, 24, 39, 0.18); --je-overlay: rgba(17, 24, 39, 0.5); /* 内部页（导航 / 页头 / 页脚 / 卡片）原版纯黑：nav #222222 / header #333333 */ --je-nav-bg: #222222; --je-nav-fg: #ffffff; --je-nav-hover: #444444; --je-header-bg: #333333; --je-header-fg: #ffffff; --je-body-bg: #f4f4f4; --je-card-bg: #ffffff; --je-heading: #333333; --je-accent: #111827; --je-accent-hover: #374151; --je-on-accent: #ffffff; --je-shadow-color: #444444; /* 下拉面板：深色导航之下的浅色浮层，对比清晰 */ --je-dropdown-bg: #ffffff; --je-dropdown-fg: #111827; --je-dropdown-hover: #f1f5f9; } /* ---------------- 白色（浅色） ---------------- */ html[data-theme="white"] { --je-primary: #334155; --je-primary-600: #475569; --je-primary-700: #1e293b; --je-grad: linear-gradient(135deg, #475569 0%, #0f172a 100%); --je-hero-grad: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); --je-bg: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); --je-ink: #0f172a; --je-muted: #64748b; --je-border: #cbd5e1; --je-soft: #f8fafc; --je-shadow: 0 20px 50px rgba(15, 23, 42, 0.10); --je-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08); --je-hero-fg: #0f172a; --je-hero-overlay-bg: rgba(15, 23, 42, 0.05); --je-hero-overlay-border: rgba(15, 23, 42, 0.12); --je-hero-deco: rgba(15, 23, 42, 0.05); --je-focus-ring: rgba(15, 23, 42, 0.15); --je-overlay: rgba(15, 23, 42, 0.4); --je-nav-bg: #e2e8f0; --je-nav-fg: #0f172a; --je-nav-hover: #cbd5e1; --je-header-bg: #f1f5f9; --je-header-fg: #0f172a; --je-body-bg: #ffffff; --je-card-bg: #ffffff; --je-heading: #0f172a; --je-accent: #1e293b; --je-accent-hover: #334155; --je-on-accent: #ffffff; --je-shadow-color: #cbd5e1; /* 下拉面板：在浅灰导航下用更白的浮层 + 描边区分 */ --je-dropdown-bg: #fbfdff; --je-dropdown-fg: #0f172a; --je-dropdown-hover: #eef2f7; } /* ---------------- 粉色（低饱和 玫瑰） ---------------- */ html[data-theme="pink"] { --je-primary: #be4d6a; --je-primary-600: #a23f59; --je-primary-700: #7e2f44; --je-grad: linear-gradient(135deg, #d2778f 0%, #9c3a55 100%); --je-hero-grad: linear-gradient(135deg, #9c3a55 0%, #4a1c2b 100%); --je-bg: linear-gradient(135deg, #fdf2f5 0%, #ffffff 100%); --je-ink: #4a1c2b; --je-muted: #9a6b78; --je-border: #f3c9d6; --je-soft: #fdf2f5; --je-shadow: 0 20px 50px rgba(158, 58, 85, 0.18); --je-shadow-sm: 0 8px 20px rgba(158, 58, 85, 0.14); --je-hero-fg: #ffffff; --je-hero-overlay-bg: rgba(255, 255, 255, 0.16); --je-hero-overlay-border: rgba(255, 255, 255, 0.28); --je-hero-deco: rgba(255, 255, 255, 0.12); --je-focus-ring: rgba(190, 77, 106, 0.20); --je-overlay: rgba(74, 28, 43, 0.5); --je-nav-bg: #7e2f44; --je-nav-fg: #ffffff; --je-nav-hover: #9c3a55; --je-header-bg: #9c3a55; --je-header-fg: #ffffff; --je-body-bg: #fdf2f5; --je-card-bg: #ffffff; --je-heading: #7e2f44; --je-accent: #be4d6a; --je-accent-hover: #d2778f; --je-on-accent: #ffffff; --je-shadow-color: #9c3a55; /* 下拉面板：深导航之下的白色浮层，深色文字，清晰可读 */ --je-dropdown-bg: #ffffff; --je-dropdown-fg: #4a1c2b; --je-dropdown-hover: #fdf2f5; } /* ---------------- 紫色（低饱和 紫罗兰） ---------------- */ html[data-theme="purple"] { --je-primary: #7c5cc4; --je-primary-600: #6a4cb0; --je-primary-700: #513a87; --je-grad: linear-gradient(135deg, #9a82d6 0%, #6a4cb0 100%); --je-hero-grad: linear-gradient(135deg, #6a4cb0 0%, #3a2c5e 100%); --je-bg: linear-gradient(135deg, #f5f3fc 0%, #ffffff 100%); --je-ink: #3a2c5e; --je-muted: #6f6592; --je-border: #ddd4f0; --je-soft: #f5f3fc; --je-shadow: 0 20px 50px rgba(106, 76, 176, 0.18); --je-shadow-sm: 0 8px 20px rgba(106, 76, 176, 0.14); --je-hero-fg: #ffffff; --je-hero-overlay-bg: rgba(255, 255, 255, 0.16); --je-hero-overlay-border: rgba(255, 255, 255, 0.28); --je-hero-deco: rgba(255, 255, 255, 0.12); --je-focus-ring: rgba(124, 92, 196, 0.20); --je-overlay: rgba(58, 44, 94, 0.5); --je-nav-bg: #513a87; --je-nav-fg: #ffffff; --je-nav-hover: #6a4cb0; --je-header-bg: #6a4cb0; --je-header-fg: #ffffff; --je-body-bg: #f5f3fc; --je-card-bg: #ffffff; --je-heading: #513a87; --je-accent: #7c5cc4; --je-accent-hover: #9a82d6; --je-on-accent: #ffffff; --je-shadow-color: #6a4cb0; --je-dropdown-bg: #ffffff; --je-dropdown-fg: #3a2c5e; --je-dropdown-hover: #f5f3fc; } /* ---------------- 蓝色（低饱和 雾蓝） ---------------- */ html[data-theme="blue"] { --je-primary: #3f6fa3; --je-primary-600: #355f8c; --je-primary-700: #274a6e; --je-grad: linear-gradient(135deg, #5e8ec0 0%, #355f8c 100%); --je-hero-grad: linear-gradient(135deg, #355f8c 0%, #1c3450 100%); --je-bg: linear-gradient(135deg, #eef4fa 0%, #ffffff 100%); --je-ink: #1c3450; --je-muted: #5f7693; --je-border: #c6d8ec; --je-soft: #eef4fa; --je-shadow: 0 20px 50px rgba(53, 95, 140, 0.18); --je-shadow-sm: 0 8px 20px rgba(53, 95, 140, 0.14); --je-hero-fg: #ffffff; --je-hero-overlay-bg: rgba(255, 255, 255, 0.16); --je-hero-overlay-border: rgba(255, 255, 255, 0.28); --je-hero-deco: rgba(255, 255, 255, 0.12); --je-focus-ring: rgba(63, 111, 163, 0.20); --je-overlay: rgba(28, 52, 80, 0.5); --je-nav-bg: #274a6e; --je-nav-fg: #ffffff; --je-nav-hover: #355f8c; --je-header-bg: #355f8c; --je-header-fg: #ffffff; --je-body-bg: #eef4fa; --je-card-bg: #ffffff; --je-heading: #274a6e; --je-accent: #3f6fa3; --je-accent-hover: #5e8ec0; --je-on-accent: #ffffff; --je-shadow-color: #355f8c; --je-dropdown-bg: #ffffff; --je-dropdown-fg: #1c3450; --je-dropdown-hover: #eef4fa; } /* ---------------- 黄色（低饱和 暖金） ---------------- */ html[data-theme="yellow"] { --je-primary: #b08438; --je-primary-600: #97702e; --je-primary-700: #755626; --je-grad: linear-gradient(135deg, #cda257 0%, #97702e 100%); --je-hero-grad: linear-gradient(135deg, #97702e 0%, #57401c 100%); --je-bg: linear-gradient(135deg, #fbf6ec 0%, #ffffff 100%); --je-ink: #57401c; --je-muted: #8f744a; --je-border: #ecd9b0; --je-soft: #fbf6ec; --je-shadow: 0 20px 50px rgba(151, 112, 46, 0.18); --je-shadow-sm: 0 8px 20px rgba(151, 112, 46, 0.14); --je-hero-fg: #ffffff; --je-hero-overlay-bg: rgba(255, 255, 255, 0.18); --je-hero-overlay-border: rgba(255, 255, 255, 0.32); --je-hero-deco: rgba(255, 255, 255, 0.14); --je-focus-ring: rgba(176, 132, 56, 0.20); --je-overlay: rgba(87, 64, 28, 0.5); --je-nav-bg: #755626; --je-nav-fg: #ffffff; --je-nav-hover: #97702e; --je-header-bg: #97702e; --je-header-fg: #ffffff; --je-body-bg: #fbf6ec; --je-card-bg: #ffffff; --je-heading: #755626; --je-accent: #b08438; --je-accent-hover: #cda257; --je-on-accent: #ffffff; --je-shadow-color: #97702e; --je-dropdown-bg: #ffffff; --je-dropdown-fg: #57401c; --je-dropdown-hover: #fbf6ec; } /* ---------------- 橙色（低饱和 陶土） ---------------- */ html[data-theme="orange"] { --je-primary: #c2693f; --je-primary-600: #a85730; --je-primary-700: #834021; --je-grad: linear-gradient(135deg, #d98a5f 0%, #a85730 100%); --je-hero-grad: linear-gradient(135deg, #a85730 0%, #5e2e18 100%); --je-bg: linear-gradient(135deg, #fbf2ec 0%, #ffffff 100%); --je-ink: #5e2e18; --je-muted: #93664c; --je-border: #f0cdb6; --je-soft: #fbf2ec; --je-shadow: 0 20px 50px rgba(168, 87, 48, 0.18); --je-shadow-sm: 0 8px 20px rgba(168, 87, 48, 0.14); --je-hero-fg: #ffffff; --je-hero-overlay-bg: rgba(255, 255, 255, 0.16); --je-hero-overlay-border: rgba(255, 255, 255, 0.28); --je-hero-deco: rgba(255, 255, 255, 0.12); --je-focus-ring: rgba(194, 105, 63, 0.20); --je-overlay: rgba(94, 46, 24, 0.5); --je-nav-bg: #834021; --je-nav-fg: #ffffff; --je-nav-hover: #a85730; --je-header-bg: #a85730; --je-header-fg: #ffffff; --je-body-bg: #fbf2ec; --je-card-bg: #ffffff; --je-heading: #834021; --je-accent: #c2693f; --je-accent-hover: #d98a5f; --je-on-accent: #ffffff; --je-shadow-color: #a85730; --je-dropdown-bg: #ffffff; --je-dropdown-fg: #5e2e18; --je-dropdown-hover: #fbf2ec; } /* ============================================================ 主题选择器 UI：图标按钮 + 下拉面板 内部页挂在 _nav.html，登录页挂在 auth-page。 ============================================================ */ .theme-picker { position: relative; display: inline-flex; align-items: center; margin: 0 10px; height: 45px; } /* 调色板图标按钮 */ .theme-trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--je-nav-fg, #fff); cursor: pointer; transition: background 0.15s ease; } .theme-trigger:hover { background: var(--je-nav-hover, #444); } .theme-trigger:focus-visible { outline: 2px solid var(--je-primary); outline-offset: 2px; } .theme-trigger svg { width: 20px; height: 20px; } /* 下拉主题面板 */ .theme-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; padding: 6px; background: var(--je-dropdown-bg, #fff); border: 1px solid var(--je-border, #d1d5db); border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); z-index: 60; display: flex; flex-direction: column; gap: 2px; } .theme-menu[hidden] { display: none; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 9px; background: transparent; color: var(--je-dropdown-fg, #111827); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.15s ease; } .theme-option:hover { background: var(--je-dropdown-hover, #f1f5f9); } .theme-option.active { background: var(--je-dropdown-hover, #f1f5f9); outline: 2px solid var(--je-primary); outline-offset: -2px; } .theme-swatch { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } /* 登录页：浮动在右上角，登录前也能切换 */ body.auth-page .theme-picker { position: fixed; top: 16px; right: 16px; z-index: 50; height: auto; margin: 0; padding: 8px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px); border: 1px solid var(--je-border, #d1d5db); border-radius: 14px; box-shadow: var(--je-shadow-sm); } body.auth-page .theme-trigger { color: var(--je-ink, #111827); } body.auth-page .theme-trigger:hover { background: rgba(0, 0, 0, 0.06); } body.auth-page .theme-menu { top: calc(100% + 8px); }