/* ============================================================ themes.css —— 主题配色配置（唯一的颜色参数来源） ------------------------------------------------------------ ★ 本文件是「颜色」的唯一配置文件。未来只改配色、换主题时， 只需修改此文件里的 CSS 变量值，严禁改动 style.css 的框体结构。 ◆ 主题按「基础明暗 / 氛围暗色 / 明亮 / 极简亮色」分组；旧主题值继续保留 ◆ JS（app.js applyTheme）把 data-theme=light|dark 写到 ， style.css 通过 :root[data-theme="light"] 命中明亮配色。 ◆ 新增主题：复制一套 :root[data-theme="xxx"] 变量块即可，无需改 JS。 ============================================================ */ /* ---------- 暗色主题（默认配色） ---------- */ :root { color-scheme: dark; /* 基础背景 / 表面 */ --bg: #0f1115; /* 页面整体背景 */ --card: #1a1d24; /* 卡片、顶栏等主表面 */ --card2: #252a35; /* 次级表面：加深，配合三态底色更分层 */ --border: #2a2f3a; /* 分割线 / 边框 */ /* 文字 */ --text: #e6e8ee; /* 主文字 */ --muted: #8a909c; /* 弱化：稍暗，配合「去搜索」置灰感 */ --on-accent: #ffffff; /* 强调色背景之上的文字（通常恒为白） */ /* 品牌强调色 */ --accent: #4f8cff; /* 资源数：蓝 */ --accent2: #6aa1ff; --accent-rgb: 79, 140, 255; /* 危险 / 错误 */ --danger: #ff5b5b; /* 状态色（成功 / 警告 / 错误 / 信息）*/ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.15); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.15); --error: #ef4444; --error-bg: rgba(239, 68, 68, 0.15); --info: #63b3ed; --info-bg: rgba(99, 179, 237, 0.15); /* 评分 badge */ --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #ffd166; /* 类型标签：电影/剧集 区分色 */ --type-movie: #4f8cff; --type-tv: #f59e0b; /* 遮罩 / 阴影 */ --overlay: rgba(0, 0, 0, 0.65); --overlay-strong: rgba(0, 0, 0, 0.9); --shadow: rgba(0, 0, 0, 0.15); --shadow-soft: rgba(0, 0, 0, 0.1); --shadow-hover: rgba(0, 0, 0, 0.3); } /* ---------- 明亮主题（data-theme="light"，柔和护眼版） ---------- */ :root[data-theme="light"] { color-scheme: light; /* 基础背景 / 表面 —— 纯白 → 柔和米白，降低刺眼感 */ --bg: #fafafa; --card: #ededed; --card2: #f0f1f4; --border: #e4e7ec; /* 文字 —— 纯黑 → 深灰，柔和对比 */ --text: #2a2d31; --muted: #5a6272; --on-accent: #ffffff; /* 品牌强调色（深蓝绿主色）*/ --accent: #032541; --accent2: #01b4e4; --accent-rgb: 3, 37, 65; /* 危险 / 错误 */ --danger: #e5484d; /* 状态色 */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --error: #ef4444; --error-bg: rgba(239, 68, 68, 0.12); --info: #63b3ed; --info-bg: rgba(99, 179, 237, 0.12); /* 评分 badge */ --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #ffd166; /* 类型标签：电影/剧集 区分色 */ --type-movie: #032541; --type-tv: #854d0e; /* 遮罩 / 阴影 —— 更轻更透 */ --overlay: rgba(0, 0, 0, 0.45); --overlay-strong: rgba(0, 0, 0, 0.8); --shadow: rgba(0, 0, 0, 0.06); --shadow-soft: rgba(0, 0, 0, 0.04); --shadow-hover: rgba(0, 0, 0, 0.1); } /* ============================================================ 以下为主题「追加」区：新增主题一律追加在此处，不改动上方原有配色。 ============================================================ */ /* ---------- 夜场影院（cinema）：暗色紫调 ---------- */ :root[data-theme="cinema"] { color-scheme: dark; --bg: #0c0c14; --card: #16161f; --card2: #232330; /* 加深，三态底色更分层 */ --border: #2c2c3a; --text: #eceaf4; --muted: #8a85a0; /* 置灰紫，配合「去搜索」 */ --on-accent: #ffffff; --accent: #7a5cf5; /* 资源数：靛紫 */ --accent2: #9c82ff; --accent-rgb: 122, 92, 245; --danger: #ff5c6c; --success: #2fd182; --success-bg: rgba(47, 209, 130, 0.15); --warning: #f0a63c; --warning-bg: rgba(240, 166, 60, 0.15); /* 未上映：琥珀 */ --error: #f25f6a; --error-bg: rgba(242, 95, 106, 0.15); --info: #7db6f5; --info-bg: rgba(125, 182, 245, 0.15); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #ffd166; /* 类型标签：电影/剧集 区分色 */ --type-movie: #7a5cf5; --type-tv: #f0a63c; --overlay: rgba(8, 8, 14, 0.66); --overlay-strong: rgba(8, 8, 14, 0.92); --shadow: rgba(0, 0, 0, 0.4); --shadow-soft: rgba(0, 0, 0, 0.28); --shadow-hover: rgba(0, 0, 0, 0.55); } /* ---------- 夜场影院（cinema-light）：柔和紫调 ---------- */ :root[data-theme="cinema-light"] { color-scheme: light; --bg: #faf9fd; /* 微紫米白 */ --card: #edecef; --card2: #f0edf8; /* 极淡紫灰 */ --border: #e8e3f0; --text: #2d2a35; /* 深灰紫，不刺眼 */ --muted: #6a6580; /* 置灰紫 */ --on-accent: #ffffff; --accent: #5a3fd6; /* 稍柔和的靛紫 */ --accent2: #7c68e8; --accent-rgb: 90, 63, 214; --danger: #d9486b; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a86e0; --info-bg: rgba(74, 134, 224, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #d9a820; --type-movie: #5a3fd6; --type-tv: #854d0e; --overlay: rgba(20, 16, 40, 0.4); --overlay-strong: rgba(15, 12, 30, 0.7); --shadow: rgba(20, 16, 40, 0.06); --shadow-soft: rgba(20, 16, 40, 0.04); --shadow-hover: rgba(20, 16, 40, 0.1); } /* ============================================================ 以下 4 个新增主题：只追加配色，不动任何结构/交互代码 ============================================================ */ /* ---------- OLED 真黑（oled）：纯黑 #000000 ---------- */ :root[data-theme="oled"] { color-scheme: dark; --bg: #000000; --card: #0a0a0a; --card2: #1a1a1a; /* 给三态底色留层次 */ --border: #1e1e1e; --text: #ffffff; --muted: #888888; /* 置灰，配合「去搜索」 */ --on-accent: #000000; --accent: #ffffff; /* 资源数：纯白 */ --accent2: #e0e0e0; --accent-rgb: 255, 255, 255; --danger: #ff4444; --success: #00e676; --success-bg: rgba(0, 230, 118, 0.15); --warning: #ffd600; --warning-bg: rgba(255, 214, 0, 0.15); /* 未上映：亮黄 */ --error: #ff4444; --error-bg: rgba(255, 68, 68, 0.15); --info: #40c4ff; --info-bg: rgba(64, 196, 255, 0.15); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #000; --rating-tmdb: #4c9aff; --rating-gold: #ffd600; /* 类型标签：电影/剧集 区分色 */ --type-movie: #ffffff; --type-tv: #ffd600; --overlay: rgba(0, 0, 0, 0.8); --overlay-strong: rgba(0, 0, 0, 0.95); --shadow: rgba(255, 255, 255, 0.05); --shadow-soft: rgba(255, 255, 255, 0.03); --shadow-hover: rgba(255, 255, 255, 0.1); } /* ---------- OLED 真黑（oled-light）：柔和高对比 ---------- */ :root[data-theme="oled-light"] { color-scheme: light; --bg: #fafafa; /* 柔和米白 */ --card: #ededed; --card2: #f0f0f0; /* 极浅灰 */ --border: #e4e4e4; --text: #1a1a1a; /* 柔和黑 */ --muted: #565656; /* 置灰 */ --on-accent: #ffffff; --accent: #1a1a1a; /* 资源数：深灰 */ --accent2: #444444; --accent-rgb: 26, 26, 26; --danger: #cc0000; --success: #00a854; --success-bg: rgba(0, 168, 84, 0.1); --warning: #b89600; --warning-bg: rgba(184, 150, 0, 0.1); --error: #cc0000; --error-bg: rgba(204, 0, 0, 0.1); --info: #0088cc; --info-bg: rgba(0, 136, 204, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #fff; --rating-tmdb: #4c9aff; --rating-gold: #b89600; --type-movie: #1a1a1a; --type-tv: #854d0e; --overlay: rgba(0, 0, 0, 0.4); --overlay-strong: rgba(0, 0, 0, 0.7); --shadow: rgba(0, 0, 0, 0.06); --shadow-soft: rgba(0, 0, 0, 0.04); --shadow-hover: rgba(0, 0, 0, 0.1); } /* ---------- 复古胶片（retro）：暖棕/古金黄 ---------- */ :root[data-theme="retro"] { color-scheme: dark; --bg: #1a140d; --card: #241b11; --card2: #332818; /* 三态底色分层 */ --border: #3d2f1e; --text: #f5e6cc; --muted: #a68c5e; /* 置灰棕，配合「去搜索」 */ --on-accent: #1a140d; --accent: #d4a542; /* 资源数：古金黄 */ --accent2: #e8c56e; --accent-rgb: 212, 165, 66; --danger: #c45a4a; --success: #7a9e5f; --success-bg: rgba(122, 158, 95, 0.15); --warning: #f5b02e; --warning-bg: rgba(245, 176, 46, 0.15); /* 未上映：更亮琥珀 */ --error: #c45a4a; --error-bg: rgba(196, 90, 74, 0.15); --info: #6b9ac4; --info-bg: rgba(107, 154, 196, 0.15); --rating-douban: #7a9e5f; --rating-imdb: #d4a542; --rating-imdb-text: #1a140d; --rating-tmdb: #6b9ac4; --rating-gold: #d4a542; /* 类型标签：电影/剧集 区分色 */ --type-movie: #d4a542; --type-tv: #f5b02e; --overlay: rgba(15, 10, 5, 0.7); --overlay-strong: rgba(15, 10, 5, 0.92); --shadow: rgba(0, 0, 0, 0.5); --shadow-soft: rgba(0, 0, 0, 0.35); --shadow-hover: rgba(0, 0, 0, 0.65); } /* ---------- 胶片（retro-light）：暖奶茶护眼 ---------- */ :root[data-theme="retro-light"] { color-scheme: light; --bg: #fef8f0; /* 奶茶白 */ --card: #edebe7; --card2: #f0e6d8; /* 极淡暖灰 */ --border: #e8dcc8; --text: #4a3d2a; /* 深暖灰 */ --muted: #7a6348; /* 置灰棕 */ --on-accent: #ffffff; --accent: #8a5a08; /* 资源数：暗金（加深，白字对比达标） */ --accent2: #a87a18; --accent-rgb: 138, 90, 8; --danger: #a04030; --success: #5a7a3f; --success-bg: rgba(90, 122, 63, 0.1); --warning: #e8a01a; --warning-bg: rgba(232, 160, 26, 0.1); --error: #a04030; --error-bg: rgba(160, 64, 48, 0.1); --info: #4a7a9c; --info-bg: rgba(74, 122, 156, 0.1); --rating-douban: #5a7a3f; --rating-imdb: #b8860b; --rating-imdb-text: #fff; --rating-tmdb: #4a7a9c; --rating-gold: #daa520; --type-movie: #8a5a08; --type-tv: #854d0e; --overlay: rgba(30, 24, 15, 0.35); --overlay-strong: rgba(20, 15, 8, 0.65); --shadow: rgba(30, 24, 15, 0.06); --shadow-soft: rgba(30, 24, 15, 0.04); --shadow-hover: rgba(30, 24, 15, 0.1); } /* ---------- 森林绿：深绿底 + 翠绿强调 ---------- */ :root[data-theme="forest"] { color-scheme: dark; --bg: #0a160d; --card: #102416; --card2: #1a3822; /* 三态底色分层 */ --border: #1e482a; --text: #e0f0e3; --muted: #7a9e82; /* 置灰绿，配合「去搜索」 */ --on-accent: #0a160d; --accent: #34d399; /* 资源数：翠绿 */ --accent2: #6ee7b7; --accent-rgb: 52, 211, 153; --danger: #f87171; --success: #34d399; --success-bg: rgba(52, 211, 153, 0.15); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15); /* 未上映：琥珀黄 */ --error: #f87171; --error-bg: rgba(248, 113, 113, 0.15); --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.15); --rating-douban: #34d399; --rating-imdb: #fbbf24; --rating-imdb-text: #0a160d; --rating-tmdb: #60a5fa; --rating-gold: #fbbf24; /* 类型标签：电影/剧集 区分色 */ --type-movie: #34d399; --type-tv: #fbbf24; --overlay: rgba(5, 12, 7, 0.7); --overlay-strong: rgba(5, 12, 7, 0.92); --shadow: rgba(0, 0, 0, 0.5); --shadow-soft: rgba(0, 0, 0, 0.35); --shadow-hover: rgba(0, 0, 0, 0.65); } /* ---------- 森林（forest-light）：清新淡绿护眼 ---------- */ :root[data-theme="forest-light"] { color-scheme: light; --bg: #f0fdf4; /* 极淡薄荷绿 */ --card: #e8eee9; --card2: #f2faf5; /* 极淡绿灰 */ --border: #c8e8d8; --text: #1a3a2a; /* 深灰绿 */ --muted: #3f6b4e; /* 置灰绿 */ --on-accent: #ffffff; --accent: #04694a; /* 资源数：翠绿（加深，白字对比达标） */ --accent2: #0a7a58; --accent-rgb: 4, 105, 74; --danger: #dc2626; --success: #059669; --success-bg: rgba(5, 150, 105, 0.1); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.1); --error: #dc2626; --error-bg: rgba(220, 38, 38, 0.1); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.1); --rating-douban: #059669; --rating-imdb: #d97706; --rating-imdb-text: #fff; --rating-tmdb: #2563eb; --rating-gold: #fbbf24; --type-movie: #04694a; --type-tv: #92400e; --overlay: rgba(5, 20, 12, 0.35); --overlay-strong: rgba(3, 15, 8, 0.65); --shadow: rgba(5, 20, 12, 0.06); --shadow-soft: rgba(5, 20, 12, 0.04); --shadow-hover: rgba(5, 20, 12, 0.1); } /* ---------- 赛博朋克：霓虹青/品红 ---------- */ :root[data-theme="cyberpunk"] { color-scheme: dark; --bg: #0a0a1a; --card: #12122a; --card2: #1e1e40; /* 三态底色分层 */ --border: #2a2a5a; --text: #f0f0ff; --muted: #8a8ac0; /* 置灰青，配合「去搜索」 */ --on-accent: #0a0a1a; --accent: #00ffff; /* 资源数：霓虹青 */ --accent2: #66ffff; --accent-rgb: 0, 255, 255; --danger: #ff00ff; --success: #00ff88; --success-bg: rgba(0, 255, 136, 0.15); --warning: #ffff00; --warning-bg: rgba(255, 255, 0, 0.15); /* 未上映：亮黄 */ --error: #ff00ff; --error-bg: rgba(255, 0, 255, 0.15); --info: #00ffff; --info-bg: rgba(0, 255, 255, 0.15); --rating-douban: #00ff88; --rating-imdb: #ffff00; --rating-imdb-text: #0a0a1a; --rating-tmdb: #00ffff; --rating-gold: #ffff00; /* 类型标签：电影/剧集 区分色 */ --type-movie: #00ffff; --type-tv: #ffff00; --overlay: rgba(5, 5, 15, 0.7); --overlay-strong: rgba(5, 5, 15, 0.92); --shadow: rgba(0, 255, 255, 0.15); --shadow-soft: rgba(0, 255, 255, 0.08); --shadow-hover: rgba(0, 255, 255, 0.3); } /* ---------- 赛博（cyberpunk-light）：柔和青调 ---------- */ :root[data-theme="cyberpunk-light"] { color-scheme: light; --bg: #f0f0fa; /* 极淡青白 */ --card: #e4e4e8; --card2: #e0e0f0; /* 极淡青灰 */ --border: #d0d0e8; --text: #2a2a4a; /* 深灰青 */ --muted: #5f5f80; /* 置灰青 */ --on-accent: #ffffff; --accent: #006666; /* 资源数：深青（加深，白字对比达标） */ --accent2: #008888; --accent-rgb: 0, 102, 102; --danger: #cc00cc; --success: #00aa55; --success-bg: rgba(0, 170, 85, 0.1); --warning: #ccaa00; --warning-bg: rgba(204, 170, 0, 0.1); --error: #cc00cc; --error-bg: rgba(204, 0, 204, 0.1); --info: #00aaaa; --info-bg: rgba(0, 170, 170, 0.1); --rating-douban: #00aa55; --rating-imdb: #ccaa00; --rating-imdb-text: #fff; --rating-tmdb: #00aaaa; --rating-gold: #ccaa00; --type-movie: #006666; --type-tv: #854d0e; --overlay: rgba(10, 10, 30, 0.35); --overlay-strong: rgba(8, 8, 25, 0.65); --shadow: rgba(0, 150, 150, 0.06); --shadow-soft: rgba(0, 150, 150, 0.04); --shadow-hover: rgba(0, 150, 150, 0.1); } /* ---------- 女粉（pink）：柔和粉色系 ---------- */ :root[data-theme="pink"] { color-scheme: dark; --bg: #1a0d14; --card: #24141c; --card2: #2e1a26; --border: #3d2634; --text: #fce4ec; --muted: #c8a8b8; --on-accent: #1a0d14; --accent: #f06292; /* 主粉 */ --accent2: #f8a5c2; --accent-rgb: 240, 98, 146; --danger: #ff5c8a; --success: #81c784; --success-bg: rgba(129, 199, 132, 0.15); --warning: #ffd54f; --warning-bg: rgba(255, 213, 79, 0.15); /* 未上映：暖黄 */ --error: #ff5c8a; --error-bg: rgba(255, 92, 138, 0.15); --info: #80d8ff; --info-bg: rgba(128, 216, 255, 0.15); --rating-douban: #81c784; --rating-imdb: #ffd54f; --rating-imdb-text: #1a0d14; --rating-tmdb: #80d8ff; --rating-gold: #ffd54f; /* 类型标签：电影/剧集 区分色 */ --type-movie: #f06292; --type-tv: #f8a5c2; --overlay: rgba(15, 8, 12, 0.7); --overlay-strong: rgba(15, 8, 12, 0.92); --shadow: rgba(240, 98, 146, 0.15); --shadow-soft: rgba(240, 98, 146, 0.08); --shadow-hover: rgba(240, 98, 146, 0.3); } :root[data-theme="pink-light"] { color-scheme: light; --bg: #fdf0f5; /* 极淡粉白 */ --card: #eee6e8; --card2: #f5e0e8; /* 极淡粉灰 */ --border: #f0d0dc; --text: #4a2a38; /* 深粉灰 */ --muted: #8a5a6e; /* 置灰粉 */ --on-accent: #ffffff; --accent: #c2185b; /* 资源数：深粉（加深，白字对比达标） */ --accent2: #d6336e; --accent-rgb: 194, 24, 91; --danger: #d81b60; --success: #4caf50; --success-bg: rgba(76, 175, 80, 0.1); --warning: #ffb300; --warning-bg: rgba(255, 179, 0, 0.1); --error: #d81b60; --error-bg: rgba(216, 27, 96, 0.1); --info: #00bcd4; --info-bg: rgba(0, 188, 212, 0.1); --rating-douban: #4caf50; --rating-imdb: #ffb300; --rating-imdb-text: #fff; --rating-tmdb: #00bcd4; --rating-gold: #ffb300; --type-movie: #c2185b; --type-tv: #be185d; --overlay: rgba(30, 15, 20, 0.35); --overlay-strong: rgba(20, 10, 15, 0.65); --shadow: rgba(233, 30, 99, 0.06); --shadow-soft: rgba(233, 30, 99, 0.04); --shadow-hover: rgba(233, 30, 99, 0.1); } /* ============================================================ 新增 4 主题：日落 / 海洋 / 薰衣草 / 电竞（各单色变体） ============================================================ */ /* ---------- 日落（sunset）：暖橙红渐变 ---------- */ :root[data-theme="sunset"] { color-scheme: dark; --bg: #1a0f0d; --card: #241512; --card2: #33201b; --border: #3d2a24; --text: #f8e8e0; --muted: #b09080; --on-accent: #1a0f0d; --accent: #ff8c5a; --accent2: #ffb38a; --accent-rgb: 255, 140, 90; --danger: #ff5b5b; --success: #ffb347; --success-bg: rgba(255, 179, 71, 0.15); --warning: #ffd54f; --warning-bg: rgba(255, 213, 79, 0.15); --error: #ff6b5a; --error-bg: rgba(255, 107, 90, 0.15); --info: #ff9e7a; --info-bg: rgba(255, 158, 122, 0.15); --rating-douban: #ffb347; --rating-imdb: #ffd54f; --rating-imdb-text: #1a0f0d; --rating-tmdb: #ff8c5a; --rating-gold: #ffd54f; --type-movie: #ff8c5a; --type-tv: #ffd54f; --overlay: rgba(20, 8, 5, 0.7); --overlay-strong: rgba(15, 6, 4, 0.92); --shadow: rgba(255, 140, 90, 0.12); --shadow-soft: rgba(255, 140, 90, 0.06); --shadow-hover: rgba(255, 140, 90, 0.25); } /* ---------- 海洋（ocean）：深蓝/青 ---------- */ :root[data-theme="ocean"] { color-scheme: dark; --bg: #08121e; --card: #0e1c2e; --card2: #16304a; --border: #1c3a5a; --text: #dcefff; --muted: #7fa3c0; --on-accent: #08121e; --accent: #1e9fff; --accent2: #5cc3ff; --accent-rgb: 30, 159, 255; --danger: #ff6b6b; --success: #22c5a6; --success-bg: rgba(34, 197, 166, 0.15); --warning: #ffd166; --warning-bg: rgba(255, 209, 102, 0.15); --error: #ff6b6b; --error-bg: rgba(255, 107, 107, 0.15); --info: #6bd0ff; --info-bg: rgba(107, 208, 255, 0.15); --rating-douban: #22c5a6; --rating-imdb: #ffd166; --rating-imdb-text: #08121e; --rating-tmdb: #1e9fff; --rating-gold: #ffd166; --type-movie: #1e9fff; --type-tv: #ffd166; --overlay: rgba(4, 10, 18, 0.7); --overlay-strong: rgba(2, 7, 12, 0.92); --shadow: rgba(30, 159, 255, 0.12); --shadow-soft: rgba(30, 159, 255, 0.06); --shadow-hover: rgba(30, 159, 255, 0.25); } /* ---------- 薰衣草（lavender）：淡紫 ---------- */ :root[data-theme="lavender"] { color-scheme: dark; --bg: #120f1e; --card: #1a1630; --card2: #262142; --border: #342d52; --text: #ece6f8; --muted: #9c93c0; --on-accent: #120f1e; --accent: #a78bfa; --accent2: #c4b0ff; --accent-rgb: 167, 139, 250; --danger: #ff6b9d; --success: #86efac; --success-bg: rgba(134, 239, 172, 0.15); --warning: #fcd34d; --warning-bg: rgba(252, 211, 77, 0.15); --error: #ff6b9d; --error-bg: rgba(255, 107, 157, 0.15); --info: #c4b5fd; --info-bg: rgba(196, 181, 253, 0.15); --rating-douban: #86efac; --rating-imdb: #fcd34d; --rating-imdb-text: #120f1e; --rating-tmdb: #a78bfa; --rating-gold: #fcd34d; --type-movie: #a78bfa; --type-tv: #fcd34d; --overlay: rgba(12, 8, 24, 0.7); --overlay-strong: rgba(8, 5, 18, 0.92); --shadow: rgba(167, 139, 250, 0.12); --shadow-soft: rgba(167, 139, 250, 0.06); --shadow-hover: rgba(167, 139, 250, 0.25); } /* ---------- 电竞（gaming）：霓虹科技 ---------- */ :root[data-theme="gaming"] { color-scheme: dark; --bg: #0a0f1a; --card: #101a2e; --card2: #1a2a4a; --border: #223a66; --text: #e6f7ff; --muted: #7fa0cc; --on-accent: #0a0f1a; --accent: #00e5ff; --accent2: #66f0ff; --accent-rgb: 0, 229, 255; --danger: #ff2e63; --success: #00ff88; --success-bg: rgba(0, 255, 136, 0.15); --warning: #ffe600; --warning-bg: rgba(255, 230, 0, 0.15); --error: #ff2e63; --error-bg: rgba(255, 46, 99, 0.15); --info: #00e5ff; --info-bg: rgba(0, 229, 255, 0.15); --rating-douban: #00ff88; --rating-imdb: #ffe600; --rating-imdb-text: #0a0f1a; --rating-tmdb: #00e5ff; --rating-gold: #ffe600; --type-movie: #00e5ff; --type-tv: #ffe600; --overlay: rgba(4, 8, 16, 0.7); --overlay-strong: rgba(2, 5, 10, 0.92); --shadow: rgba(0, 229, 255, 0.15); --shadow-soft: rgba(0, 229, 255, 0.08); --shadow-hover: rgba(0, 229, 255, 0.3); } /* ============================================================ 第二批新增 6 主题：赤焰 / 琥珀 / 银灰 / 薄荷 / 岩浆 / 极光（各单色变体） ============================================================ */ /* ---------- 赤焰（flame）：深红/猩红，热烈 ---------- */ :root[data-theme="flame"] { color-scheme: dark; --bg: #160a0e; --card: #201216; --card2: #2e1a20; --border: #3d242c; --text: #f8e8ec; --muted: #b08a94; --on-accent: #ffffff; --accent: #ff4d5e; --accent2: #ff7a8a; --accent-rgb: 255, 77, 94; --danger: #ff2d42; --success: #ffb84d; --success-bg: rgba(255, 184, 77, 0.15); --warning: #ff9f43; --warning-bg: rgba(255, 159, 67, 0.15); --error: #ff2d42; --error-bg: rgba(255, 45, 66, 0.15); --info: #ff7a8a; --info-bg: rgba(255, 122, 138, 0.15); --rating-douban: #ffb84d; --rating-imdb: #ffd166; --rating-imdb-text: #160a0e; --rating-tmdb: #ff7a8a; --rating-gold: #ffd166; --type-movie: #ff4d5e; --type-tv: #ff9f43; --overlay: rgba(15, 6, 9, 0.72); --overlay-strong: rgba(10, 4, 6, 0.93); --shadow: rgba(255, 77, 94, 0.18); --shadow-soft: rgba(255, 77, 94, 0.1); --shadow-hover: rgba(255, 77, 94, 0.35); } /* ---------- 琥珀（amber）：蜂蜜金/暖黄 ---------- */ :root[data-theme="amber"] { color-scheme: dark; --bg: #14100a; --card: #1e1810; --card2: #2c2316; --border: #3a2f1e; --text: #faf0dc; --muted: #b09a78; --on-accent: #14100a; --accent: #ffb700; --accent2: #ffd54d; --accent-rgb: 255, 183, 0; --danger: #ff7043; --success: #ffb700; --success-bg: rgba(255, 183, 0, 0.15); --warning: #ffd54d; --warning-bg: rgba(255, 213, 77, 0.15); --error: #ff7043; --error-bg: rgba(255, 112, 67, 0.15); --info: #ffca28; --info-bg: rgba(255, 202, 40, 0.15); --rating-douban: #ffb700; --rating-imdb: #ffd54d; --rating-imdb-text: #14100a; --rating-tmdb: #ffca28; --rating-gold: #ffd54d; --type-movie: #ffb700; --type-tv: #ff7043; --overlay: rgba(15, 10, 4, 0.72); --overlay-strong: rgba(10, 6, 2, 0.93); --shadow: rgba(255, 183, 0, 0.16); --shadow-soft: rgba(255, 183, 0, 0.08); --shadow-hover: rgba(255, 183, 0, 0.32); } /* ---------- 银灰（silver）：冷调灰/科技简约 ---------- */ :root[data-theme="silver"] { color-scheme: dark; --bg: #101216; --card: #181b21; --card2: #24282f; --border: #31363f; --text: #e8ecf2; --muted: #8f98a5; --on-accent: #101216; --accent: #c0c8d4; --accent2: #dfe4ec; --accent-rgb: 192, 200, 212; --danger: #ff6b6b; --success: #9ad8c0; --success-bg: rgba(154, 216, 192, 0.15); --warning: #e0b84d; --warning-bg: rgba(224, 184, 77, 0.15); --error: #ff6b6b; --error-bg: rgba(255, 107, 107, 0.15); --info: #8fb4d0; --info-bg: rgba(143, 180, 208, 0.15); --rating-douban: #9ad8c0; --rating-imdb: #e0b84d; --rating-imdb-text: #101216; --rating-tmdb: #8fb4d0; --rating-gold: #e0b84d; --type-movie: #c0c8d4; --type-tv: #9aa4b2; --overlay: rgba(8, 10, 13, 0.72); --overlay-strong: rgba(5, 6, 8, 0.93); --shadow: rgba(0, 0, 0, 0.45); --shadow-soft: rgba(0, 0, 0, 0.28); --shadow-hover: rgba(0, 0, 0, 0.6); } /* ---------- 薄荷（mint）：清新青绿/通透 ---------- */ :root[data-theme="mint"] { color-scheme: dark; --bg: #0a1616; --card: #112020; --card2: #1a2f2e; --border: #24403e; --text: #e2f5f2; --muted: #8ab5b0; --on-accent: #0a1616; --accent: #2dd4bf; --accent2: #5eead4; --accent-rgb: 45, 212, 191; --danger: #ff6b6b; --success: #2dd4bf; --success-bg: rgba(45, 212, 191, 0.15); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15); --error: #ff6b6b; --error-bg: rgba(255, 107, 107, 0.15); --info: #7dd3fc; --info-bg: rgba(125, 211, 252, 0.15); --rating-douban: #2dd4bf; --rating-imdb: #fbbf24; --rating-imdb-text: #0a1616; --rating-tmdb: #7dd3fc; --rating-gold: #fbbf24; --type-movie: #2dd4bf; --type-tv: #fbbf24; --overlay: rgba(4, 12, 12, 0.7); --overlay-strong: rgba(2, 8, 8, 0.92); --shadow: rgba(45, 212, 191, 0.14); --shadow-soft: rgba(45, 212, 191, 0.07); --shadow-hover: rgba(45, 212, 191, 0.28); } /* ---------- 岩浆（lava）：火山熔岩/热橙 ---------- */ :root[data-theme="lava"] { color-scheme: dark; --bg: #120606; --card: #1c0c0a; --card2: #2a1410; --border: #3d2018; --text: #fae8e0; --muted: #b08a7a; --on-accent: #ffffff; --accent: #ff5a1f; --accent2: #ff8a5a; --accent-rgb: 255, 90, 31; --danger: #ff3d2e; --success: #ffb347; --success-bg: rgba(255, 179, 71, 0.15); --warning: #ff8a2a; --warning-bg: rgba(255, 138, 42, 0.15); --error: #ff3d2e; --error-bg: rgba(255, 61, 46, 0.15); --info: #ff9e5a; --info-bg: rgba(255, 158, 90, 0.15); --rating-douban: #ffb347; --rating-imdb: #ffd166; --rating-imdb-text: #120606; --rating-tmdb: #ff9e5a; --rating-gold: #ffd166; --type-movie: #ff5a1f; --type-tv: #ffb347; --overlay: rgba(12, 4, 3, 0.74); --overlay-strong: rgba(8, 2, 2, 0.94); --shadow: rgba(255, 90, 31, 0.2); --shadow-soft: rgba(255, 90, 31, 0.1); --shadow-hover: rgba(255, 90, 31, 0.4); } /* ---------- 极光（aurora）：绿紫渐变/神秘 ---------- */ :root[data-theme="aurora"] { color-scheme: dark; --bg: #0d1018; --card: #141926; --card2: #202a3d; --border: #2c3a52; --text: #e8ecf6; --muted: #8f9ab5; --on-accent: #0d1018; --accent: #4ade80; --accent2: #a78bfa; --accent-rgb: 74, 222, 128; --danger: #ff6b9d; --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.15); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15); --error: #ff6b9d; --error-bg: rgba(255, 107, 157, 0.15); --info: #a78bfa; --info-bg: rgba(167, 139, 250, 0.15); --rating-douban: #4ade80; --rating-imdb: #fbbf24; --rating-imdb-text: #0d1018; --rating-tmdb: #a78bfa; --rating-gold: #fbbf24; --type-movie: #4ade80; --type-tv: #a78bfa; --overlay: rgba(8, 10, 16, 0.72); --overlay-strong: rgba(5, 6, 10, 0.93); --shadow: rgba(74, 222, 128, 0.15); --shadow-soft: rgba(74, 222, 128, 0.08); --shadow-hover: rgba(74, 222, 128, 0.3); } /* ============================================================ 亮色调主题追加区（8 个）：柔和浅色系，全部 color-scheme: light ============================================================ */ /* ---------- 樱花（sakura）：樱粉 ---------- */ :root[data-theme="sakura"] { color-scheme: light; --bg: #fdf7fa; /* 极淡樱粉白 */ --card: #f2e8ee; --card2: #f8f0f4; /* 淡粉灰 */ --border: #ecdce6; --text: #4a2a3a; /* 深樱粉灰 */ --muted: #8a5a70; /* 置灰粉 */ --on-accent: #ffffff; --accent: #c2185b; /* 樱花主粉 */ --accent2: #d6336e; --accent-rgb: 194, 24, 91; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a86e0; --info-bg: rgba(74, 134, 224, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #d9a820; --type-movie: #c2185b; --type-tv: #a45a08; --overlay: rgba(30, 8, 18, 0.4); --overlay-strong: rgba(22, 5, 13, 0.72); --shadow: rgba(30, 8, 18, 0.06); --shadow-soft: rgba(30, 8, 18, 0.04); --shadow-hover: rgba(30, 8, 18, 0.1); } /* ---------- 晴空（sky）：天蓝 ---------- */ :root[data-theme="sky"] { color-scheme: light; --bg: #f5f9fe; /* 极淡天蓝白 */ --card: #e9eef5; --card2: #f0f5fb; /* 淡蓝灰 */ --border: #dce5ef; --text: #1f2a37; /* 深海蓝 */ --muted: #5a6b7a; /* 置灰蓝 */ --on-accent: #ffffff; --accent: #1a6ec2; /* 晴空蓝 */ --accent2: #3a96e8; --accent-rgb: 26, 110, 194; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #1a6ec2; --info-bg: rgba(26, 110, 194, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #1a6ec2; --rating-gold: #d9a820; --type-movie: #1a6ec2; --type-tv: #8a5a08; --overlay: rgba(8, 18, 30, 0.4); --overlay-strong: rgba(5, 12, 22, 0.72); --shadow: rgba(8, 18, 30, 0.06); --shadow-soft: rgba(8, 18, 30, 0.04); --shadow-hover: rgba(8, 18, 30, 0.1); } /* ---------- 奶油（cream）：暖米 ---------- */ :root[data-theme="cream"] { color-scheme: light; --bg: #fdf9f2; /* 极淡暖米白 */ --card: #f1eadc; --card2: #f8f2e6; /* 淡米灰 */ --border: #e6dcc8; --text: #3d3324; /* 深可可 */ --muted: #7a6a52; /* 置灰棕 */ --on-accent: #ffffff; --accent: #a05c14; /* 奶油可可 */ --accent2: #b8762a; --accent-rgb: 160, 92, 20; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a86e0; --info-bg: rgba(74, 134, 224, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #d9a820; --type-movie: #a05c14; --type-tv: #7a4a08; --overlay: rgba(28, 16, 6, 0.4); --overlay-strong: rgba(20, 11, 4, 0.72); --shadow: rgba(28, 16, 6, 0.06); --shadow-soft: rgba(28, 16, 6, 0.04); --shadow-hover: rgba(28, 16, 6, 0.1); } /* ---------- 鼠尾草（sage）：灰绿 ---------- */ :root[data-theme="sage"] { color-scheme: light; --bg: #f6faf6; /* 极淡鼠尾草白 */ --card: #e6eee8; --card2: #f0f6f0; /* 淡绿灰 */ --border: #dce6de; --text: #24352a; /* 深松绿 */ --muted: #5a6b5e; /* 置灰绿 */ --on-accent: #ffffff; --accent: #2f7d50; /* 鼠尾草绿 */ --accent2: #3f915f; --accent-rgb: 47, 125, 80; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a86e0; --info-bg: rgba(74, 134, 224, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #d9a820; --type-movie: #2f7d50; --type-tv: #7a5a08; --overlay: rgba(10, 20, 14, 0.4); --overlay-strong: rgba(6, 14, 9, 0.72); --shadow: rgba(10, 20, 14, 0.06); --shadow-soft: rgba(10, 20, 14, 0.04); --shadow-hover: rgba(10, 20, 14, 0.1); } /* ---------- 纸墨（paper）：纯白宣纸 ---------- */ :root[data-theme="paper"] { color-scheme: light; --bg: #ffffff; /* 纯白纸 */ --card: #f1f1f1; --card2: #f7f7f7; /* 淡灰 */ --border: #e2e2e2; --text: #1a1a1a; /* 墨黑 */ --muted: #5c5c5c; /* 置灰 */ --on-accent: #ffffff; --accent: #c0392b; /* 朱砂 */ --accent2: #d6563f; --accent-rgb: 192, 57, 43; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a86e0; --info-bg: rgba(74, 134, 224, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #d9a820; --type-movie: #c0392b; --type-tv: #7a4a08; --overlay: rgba(20, 20, 20, 0.4); --overlay-strong: rgba(12, 12, 12, 0.72); --shadow: rgba(20, 20, 20, 0.06); --shadow-soft: rgba(20, 20, 20, 0.04); --shadow-hover: rgba(20, 20, 20, 0.1); } /* ---------- 云朵（cloud）：云雾灰蓝 ---------- */ :root[data-theme="cloud"] { color-scheme: light; --bg: #f4f6f8; /* 极淡云灰白 */ --card: #e8ebef; --card2: #eef1f4; /* 淡云灰 */ --border: #dbe0e6; --text: #242a31; /* 深雾蓝 */ --muted: #5d6773; /* 置灰蓝 */ --on-accent: #ffffff; --accent: #4a6fa5; /* 雾霭蓝 */ --accent2: #5d84b8; --accent-rgb: 74, 111, 165; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a6fa5; --info-bg: rgba(74, 111, 165, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4a6fa5; --rating-gold: #d9a820; --type-movie: #4a6fa5; --type-tv: #7a5a08; --overlay: rgba(12, 16, 20, 0.4); --overlay-strong: rgba(8, 11, 14, 0.72); --shadow: rgba(12, 16, 20, 0.06); --shadow-soft: rgba(12, 16, 20, 0.04); --shadow-hover: rgba(12, 16, 20, 0.1); } /* ---------- 青溪（aqua）：浅青 ---------- */ :root[data-theme="aqua"] { color-scheme: light; --bg: #f2fafb; /* 极淡青白 */ --card: #e3eef0; --card2: #edf6f8; /* 淡青灰 */ --border: #d6e8eb; --text: #1d3a3f; /* 深青黑 */ --muted: #4d6a70; /* 置灰青 */ --on-accent: #ffffff; --accent: #0d7180; /* 清溪青 */ --accent2: #0e8d9c; --accent-rgb: 13, 113, 128; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #0d7180; --info-bg: rgba(13, 113, 128, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #0d7180; --rating-gold: #d9a820; --type-movie: #0d7180; --type-tv: #7a5a08; --overlay: rgba(6, 16, 18, 0.4); --overlay-strong: rgba(4, 11, 12, 0.72); --shadow: rgba(6, 16, 18, 0.06); --shadow-soft: rgba(6, 16, 18, 0.04); --shadow-hover: rgba(6, 16, 18, 0.1); } /* ---------- 柠檬（lemon）：柠黄 ---------- */ :root[data-theme="lemon"] { color-scheme: light; --bg: #fdfcf2; /* 极淡柠檬白 */ --card: #f1efdf; --card2: #f8f6ea; /* 淡柠檬灰 */ --border: #e5e2cc; --text: #3a3524; /* 深橄榄 */ --muted: #6e674a; /* 置灰黄 */ --on-accent: #ffffff; --accent: #8a6a08; /* 柠檬橄榄 */ --accent2: #a8800a; --accent-rgb: 138, 106, 8; --danger: #d13b4d; --success: #1f9d5c; --success-bg: rgba(31, 157, 92, 0.1); --warning: #d9860a; --warning-bg: rgba(217, 134, 10, 0.1); --error: #d13b4d; --error-bg: rgba(209, 59, 77, 0.1); --info: #4a86e0; --info-bg: rgba(74, 134, 224, 0.1); --rating-douban: #2e963d; --rating-imdb: #e6b91e; --rating-imdb-text: #222; --rating-tmdb: #4c9aff; --rating-gold: #d9a820; --type-movie: #8a6a08; --type-tv: #6e4a08; --overlay: rgba(26, 22, 8, 0.4); --overlay-strong: rgba(18, 15, 5, 0.72); --shadow: rgba(26, 22, 8, 0.06); --shadow-soft: rgba(26, 22, 8, 0.04); --shadow-hover: rgba(26, 22, 8, 0.1); } /* ============================================================ 极简亮色调主题追加区（8 个）：区别于上方亮色主题，极简设计美感 ============================================================ */ /* ---------- 瓷白（porcelain）：冷调纯白 + 黛蓝呼应 ---------- */ :root[data-theme="porcelain"] { color-scheme: light; --bg: #ffffff; /* 纯白瓷面 */ --card: #f4f6f9; /* 极淡冷灰 */ --card2: #eef1f6; /* 淡雾蓝灰 */ --border: #e3e7ee; --text: #1b2430; /* 深黛蓝 */ --muted: #52606e; /* 置灰蓝 */ --on-accent: #ffffff; --accent: #024a7a; /* 黛蓝 */ --accent2: #1c6fa8; --accent-rgb: 2, 74, 122; --danger: #c0272d; --success: #0f7a4d; --success-bg: rgba(15, 122, 77, 0.1); --warning: #b04e00; --warning-bg: rgba(176, 78, 0, 0.1); --error: #c0272d; --error-bg: rgba(192, 39, 45, 0.1); --info: #1c6fa8; --info-bg: rgba(28, 111, 168, 0.1); --rating-douban: #0f7a4d; --rating-imdb: #d49a1a; --rating-imdb-text: #fff; --rating-tmdb: #1c6fa8; --rating-gold: #d49a1a; --type-movie: #024a7a; --type-tv: #7a4a02; --overlay: rgba(10, 16, 24, 0.4); --overlay-strong: rgba(6, 10, 16, 0.72); --shadow: rgba(10, 20, 30, 0.06); --shadow-soft: rgba(10, 20, 30, 0.04); --shadow-hover: rgba(10, 20, 30, 0.1); } /* ---------- 莫吉托（mojito）：薄荷白 + 青柠绿 ---------- */ :root[data-theme="mojito"] { color-scheme: light; --bg: #f8fff9; /* 泡打薄荷白 */ --card: #eaf7ee; --card2: #f1fbf4; /* 淡青白 */ --border: #d8efdf; --text: #17331f; /* 深薄荷黑 */ --muted: #4c6b55; /* 置灰绿 */ --on-accent: #ffffff; --accent: #0b7a3b; /* 青柠绿 */ --accent2: #159c52; --accent-rgb: 11, 122, 59; --danger: #c02824; --success: #0e8a46; --success-bg: rgba(14, 138, 70, 0.1); --warning: #a86b00; --warning-bg: rgba(168, 107, 0, 0.1); --error: #c02824; --error-bg: rgba(192, 40, 36, 0.1); --info: #2e86ab; --info-bg: rgba(46, 134, 171, 0.1); --rating-douban: #0e8a46; --rating-imdb: #c9970a; --rating-imdb-text: #fff; --rating-tmdb: #2e86ab; --rating-gold: #c9970a; --type-movie: #0b7a3b; --type-tv: #0b5485; --overlay: rgba(6, 20, 12, 0.4); --overlay-strong: rgba(4, 14, 8, 0.72); --shadow: rgba(10, 40, 24, 0.06); --shadow-soft: rgba(10, 40, 24, 0.04); --shadow-hover: rgba(10, 40, 24, 0.1); } /* ---------- 马卡龙（macaron）：奶白 + 蓝莓紫 ---------- */ :root[data-theme="macaron"] { color-scheme: light; --bg: #fafbff; /* 淡奶白 */ --card: #eef0fa; --card2: #f4f5fc; /* 藕紫奶白 */ --border: #e0e2f1; --text: #27204a; /* 深蓝莓紫 */ --muted: #5f5b80; /* 置灰紫 */ --on-accent: #ffffff; --accent: #5640c4; /* 蓝莓紫 */ --accent2: #7262dd; --accent-rgb: 86, 64, 196; --danger: #c02a56; --success: #0f7a52; --success-bg: rgba(15, 122, 82, 0.1); --warning: #a86a00; --warning-bg: rgba(168, 106, 0, 0.1); --error: #c02a56; --error-bg: rgba(192, 42, 86, 0.1); --info: #3d7bb8; --info-bg: rgba(61, 123, 184, 0.1); --rating-douban: #0f7a52; --rating-imdb: #cf9412; --rating-imdb-text: #fff; --rating-tmdb: #3d7bb8; --rating-gold: #cf9412; --type-movie: #5640c4; --type-tv: #c05a2a; --overlay: rgba(15, 12, 40, 0.4); --overlay-strong: rgba(10, 8, 30, 0.72); --shadow: rgba(30, 25, 60, 0.06); --shadow-soft: rgba(30, 25, 60, 0.04); --shadow-hover: rgba(30, 25, 60, 0.1); } /* ---------- 小豆蔻（cardamom）：米白 + 芫荽绿，草本莫兰迪 ---------- */ :root[data-theme="cardamom"] { color-scheme: light; --bg: #fbfaf6; /* 米白 */ --card: #f0efe6; --card2: #f5f4ec; /* 淡草米 */ --border: #e2e1d5; --text: #2c3326; /* 深茶墨绿 */ --muted: #5e6a55; /* 置灰绿 */ --on-accent: #ffffff; --accent: #5a7d3a; /* 芫荽绿 */ --accent2: #72a04e; --accent-rgb: 90, 125, 58; --danger: #b65a40; --success: #48823a; --success-bg: rgba(72, 130, 58, 0.1); --warning: #9a7710; --warning-bg: rgba(154, 119, 16, 0.1); --error: #b65a40; --error-bg: rgba(182, 90, 64, 0.1); --info: #3e78a8; --info-bg: rgba(62, 120, 168, 0.1); --rating-douban: #48823a; --rating-imdb: #b98c16; --rating-imdb-text: #fff; --rating-tmdb: #3e78a8; --rating-gold: #b98c16; --type-movie: #5a7d3a; --type-tv: #8a5a3a; --overlay: rgba(24, 30, 20, 0.4); --overlay-strong: rgba(16, 20, 12, 0.72); --shadow: rgba(40, 50, 35, 0.07); --shadow-soft: rgba(40, 50, 35, 0.05); --shadow-hover: rgba(40, 50, 35, 0.12); } /* ---------- 芥末（wasabi）：豆绿 + 山葵黄绿 ---------- */ :root[data-theme="wasabi"] { color-scheme: light; --bg: #fbfcf5; /* 绿豆白 */ --card: #f0f3e4; --card2: #f5f7ec; /* 淡豆米白 */ --border: #e0e6d0; --text: #2f3a24; /* 深橄榄 */ --muted: #5f6b50; /* 置灰橄榄 */ --on-accent: #ffffff; --accent: #6b7d24; /* 山葵黄绿 */ --accent2: #869c2f; --accent-rgb: 107, 125, 36; --danger: #b05a30; --success: #547838; --success-bg: rgba(84, 120, 56, 0.1); --warning: #9a7c08; --warning-bg: rgba(154, 124, 8, 0.1); --error: #b05a30; --error-bg: rgba(176, 90, 48, 0.1); --info: #3f7a6a; --info-bg: rgba(63, 122, 106, 0.1); --rating-douban: #547838; --rating-imdb: #b08c10; --rating-imdb-text: #fff; --rating-tmdb: #3f7a6a; --rating-gold: #b08c10; --type-movie: #6b7d24; --type-tv: #7d5a24; --overlay: rgba(26, 32, 18, 0.4); --overlay-strong: rgba(18, 22, 12, 0.72); --shadow: rgba(45, 55, 25, 0.07); --shadow-soft: rgba(45, 55, 25, 0.05); --shadow-hover: rgba(45, 55, 25, 0.12); } /* ---------- 抹茶（matcha）：抹茶白 + 深茶绿，日式静谧 ---------- */ :root[data-theme="matcha"] { color-scheme: light; --bg: #f9fbf6; /* 抹茶奶白 */ --card: #edf2e6; --card2: #f3f6ec; /* 淡抹茶 */ --border: #dde5d0; --text: #233425; /* 深抹茶绿 */ --muted: #4f6050; /* 置灰绿 */ --on-accent: #ffffff; --accent: #3e7a3a; /* 深茶绿 */ --accent2: #529a4d; --accent-rgb: 62, 122, 58; --danger: #a85a50; --success: #357a39; --success-bg: rgba(53, 122, 57, 0.1); --warning: #9a7c1a; --warning-bg: rgba(154, 124, 26, 0.1); --error: #a85a50; --error-bg: rgba(168, 90, 80, 0.1); --info: #4a708a; --info-bg: rgba(74, 112, 138, 0.1); --rating-douban: #357a39; --rating-imdb: #b58c12; --rating-imdb-text: #fff; --rating-tmdb: #4a708a; --rating-gold: #b58c12; --type-movie: #3e7a3a; --type-tv: #7a5a3a; --overlay: rgba(16, 28, 16, 0.4); --overlay-strong: rgba(10, 20, 10, 0.72); --shadow: rgba(20, 40, 24, 0.07); --shadow-soft: rgba(20, 40, 24, 0.05); --shadow-hover: rgba(20, 40, 24, 0.12); } /* ---------- 石英（quartz）：浅石灰 + 石墨深蓝，坚实极简 ---------- */ :root[data-theme="quartz"] { color-scheme: light; --bg: #f7f7f8; /* 石英灰白 */ --card: #eaeaec; --card2: #f0f0f2; /* 淡石灰 */ --border: #dddde2; --text: #22262e; /* 石墨浓黑 */ --muted: #575d68; /* 置灰 */ --on-accent: #ffffff; --accent: #37435a; /* 石墨深蓝 */ --accent2: #4d5d7a; --accent-rgb: 55, 67, 90; --danger: #a83b3b; --success: #2f6e5a; --success-bg: rgba(47, 110, 90, 0.1); --warning: #9a6e10; --warning-bg: rgba(154, 110, 16, 0.1); --error: #a83b3b; --error-bg: rgba(168, 59, 59, 0.1); --info: #3d6f9a; --info-bg: rgba(61, 111, 154, 0.1); --rating-douban: #2f6e5a; --rating-imdb: #b38417; --rating-imdb-text: #fff; --rating-tmdb: #3d6f9a; --rating-gold: #b38417; --type-movie: #37435a; --type-tv: #6a4a1e; --overlay: rgba(16, 18, 24, 0.4); --overlay-strong: rgba(10, 12, 16, 0.72); --shadow: rgba(20, 22, 28, 0.06); --shadow-soft: rgba(20, 22, 28, 0.04); --shadow-hover: rgba(20, 22, 28, 0.1); } /* ---------- 冰川（glacier）：淡冰蓝 + 钻蓝，凛冽通透 ---------- */ :root[data-theme="glacier"] { color-scheme: light; --bg: #f2f8fc; /* 淡冰蓝白 */ --card: #e0ebf3; --card2: #eaf3f9; /* 薄冰灰蓝 */ --border: #c9dcea; --text: #17313f; /* 深冰蓝黑 */ --muted: #456476; /* 置灰蓝 */ --on-accent: #ffffff; --accent: #0e5f8a; /* 冰川钻蓝 */ --accent2: #1b82b8; --accent-rgb: 14, 95, 138; --danger: #b23a52; --success: #12775a; --success-bg: rgba(18, 119, 90, 0.1); --warning: #9a6812; --warning-bg: rgba(154, 104, 18, 0.1); --error: #b23a52; --error-bg: rgba(178, 58, 82, 0.1); --info: #2a7fa8; --info-bg: rgba(42, 127, 168, 0.1); --rating-douban: #12775a; --rating-imdb: #b3881c; --rating-imdb-text: #fff; --rating-tmdb: #2a7fa8; --rating-gold: #b3881c; --type-movie: #0e5f8a; --type-tv: #8a4a0e; --overlay: rgba(6, 18, 30, 0.4); --overlay-strong: rgba(3, 12, 20, 0.72); --shadow: rgba(10, 30, 45, 0.07); --shadow-soft: rgba(10, 30, 45, 0.05); --shadow-hover: rgba(10, 30, 45, 0.12); } /* ---------- 语义别名：组件只依赖这些变量，不直接猜颜色 ---------- */ :root { --accent-fg: var(--on-accent); --accent-soft: rgba(var(--accent-rgb), 0.12); --accent-ring: rgba(var(--accent-rgb), 0.18); --success-border: color-mix(in srgb, var(--success) 35%, transparent); --warning-border: color-mix(in srgb, var(--warning) 35%, transparent); --error-border: color-mix(in srgb, var(--error) 35%, transparent); --info-border: color-mix(in srgb, var(--info) 35%, transparent); --danger-border: color-mix(in srgb, var(--danger) 45%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); --surface-overlay: color-mix(in srgb, var(--card) 70%, transparent); --focus-ring: rgba(var(--accent-rgb), 0.35); --brand-imdb-bg: #f5c518; --brand-imdb-fg: #000000; --brand-douban-bg: #2e963d; --brand-douban-fg: #ffffff; --brand-tmdb-bg: #032541; --brand-tmdb-fg: #01d277; }