/* ============================================================ 团队一线作战助手 · 一键换肤主题包（10 风格 · 颜色命名） 修复版：同时覆盖 A组(语义层 hex) + B组(shadcn HSL 裸三元组)， --presentation = 聊天主区背景色（不是品牌色！），保证背景↔文字对比。 切换由 theme-switcher.js 在 设 data-skin 触发；特异性高于 html/.dark。 ============================================================ */ /* 字体覆盖（Tailwind 写死 Inter，需 !important） */ :root[data-skin] body, :root[data-skin] .font-sans, :root[data-skin] input, :root[data-skin] textarea, :root[data-skin] button, :root[data-skin] select { font-family: var(--app-font), Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important; } /* 根背景：LibreChat 暗色 body 硬编码 rgba(23,23,23)，用 --presentation 盖住 */ :root[data-skin] body { background-color: var(--presentation) !important; } /* ===== 月白（Apple 亮 · 米白+动作蓝）===== */ :root[data-skin="apple"]{ --presentation:#ffffff; --surface-primary:#f5f5f7; --surface-primary-alt:#f5f5f7; --surface-primary-contrast:#ececf0; --surface-secondary:#f5f5f7; --surface-secondary-alt:#ececf0; --surface-tertiary:#ececf0; --surface-tertiary-alt:#ececf0; --surface-chat:#ffffff; --surface-dialog:#ffffff; --surface-active:#ececf0; --surface-active-alt:#e3e3e8; --surface-hover:#ececf0; --surface-hover-alt:#e3e3e8; --header-primary:#ffffff; --header-hover:#f5f5f7; --header-button-hover:#ececf0; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --text-secondary-alt:#6e6e73; --text-tertiary:#86868b; --border-light:#d2d2d7; --border-medium:#c7c7cc; --border-medium-alt:#c7c7cc; --border-heavy:#aeaeb2; --brand-purple:#0066cc; --ring-primary:#0071e3; --surface-submit:#0071e3; --surface-submit-hover:#0066cc; --radius:0.75rem; --app-font:"SF Pro Display","SF Pro Text"; --background:0 0% 100%; --foreground:240 4% 12%; --card:240 11% 96%; --card-foreground:240 4% 12%; --popover:0 0% 100%; --popover-foreground:240 4% 12%; --primary:210 100% 40%; --primary-foreground:0 0% 100%; --secondary:240 13% 93%; --secondary-foreground:240 4% 12%; --muted:240 13% 93%; --muted-foreground:240 2% 44%; --accent:240 13% 93%; --accent-foreground:240 4% 12%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:240 8% 84%; --input:240 8% 84%; --ring:210 100% 40%; } /* ===== 宝石蓝（BMW 亮 · 白+企业蓝 · 矩形）===== */ :root[data-skin="bmw"]{ --presentation:#ffffff; --surface-primary:#f4f6f9; --surface-primary-alt:#f4f6f9; --surface-primary-contrast:#e8edf3; --surface-secondary:#f4f6f9; --surface-secondary-alt:#e8edf3; --surface-tertiary:#e8edf3; --surface-tertiary-alt:#e8edf3; --surface-chat:#ffffff; --surface-dialog:#ffffff; --surface-active:#e8edf3; --surface-active-alt:#dde5ee; --surface-hover:#e8edf3; --surface-hover-alt:#dde5ee; --header-primary:#ffffff; --header-hover:#f4f6f9; --header-button-hover:#e8edf3; --text-primary:#1a2129; --text-secondary:#5b6470; --text-secondary-alt:#5b6470; --text-tertiary:#8a93a0; --border-light:#d9e0e8; --border-medium:#c5cfdb; --border-medium-alt:#c5cfdb; --border-heavy:#aab6c4; --brand-purple:#1c69d4; --ring-primary:#1c69d4; --surface-submit:#1c69d4; --surface-submit-hover:#0653b6; --radius:0rem; --app-font:"BMW Type Next Latin","Archivo","Inter Tight"; --background:0 0% 100%; --foreground:213 22% 13%; --card:213 33% 96%; --card-foreground:213 22% 13%; --popover:0 0% 100%; --popover-foreground:213 22% 13%; --primary:213 76% 47%; --primary-foreground:0 0% 100%; --secondary:212 33% 93%; --secondary-foreground:213 22% 13%; --muted:212 33% 93%; --muted-foreground:213 11% 40%; --accent:212 33% 93%; --accent-foreground:213 22% 13%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:213 24% 88%; --input:213 24% 88%; --ring:213 76% 47%; } /* ===== 奶油杏（Lovable 亮暖 · 奶油+暖棕）===== */ :root[data-skin="lovable"]{ --presentation:#f7f4ed; --surface-primary:#fcfbf8; --surface-primary-alt:#fcfbf8; --surface-primary-contrast:#efeadf; --surface-secondary:#fcfbf8; --surface-secondary-alt:#efeadf; --surface-tertiary:#efeadf; --surface-tertiary-alt:#efeadf; --surface-chat:#fcfbf8; --surface-dialog:#fcfbf8; --surface-active:#efeadf; --surface-active-alt:#e6e1d6; --surface-hover:#efeadf; --surface-hover-alt:#e6e1d6; --header-primary:#f7f4ed; --header-hover:#fcfbf8; --header-button-hover:#efeadf; --text-primary:#1c1c1c; --text-secondary:#5f5f5d; --text-secondary-alt:#5f5f5d; --text-tertiary:#8a8a86; --border-light:#e6e1d6; --border-medium:#d8d4ca; --border-medium-alt:#d8d4ca; --border-heavy:#bdb8ab; --brand-purple:#8a5a2b; --ring-primary:#8a5a2b; --surface-submit:#8a5a2b; --surface-submit-hover:#6f4720; --radius:0.75rem; --app-font:"Camera Plain","Geist","Inter"; --background:43 38% 95%; --foreground:0 0% 11%; --card:45 50% 98%; --card-foreground:0 0% 11%; --popover:45 50% 98%; --popover-foreground:0 0% 11%; --primary:28 53% 36%; --primary-foreground:0 0% 100%; --secondary:42 30% 90%; --secondary-foreground:0 0% 11%; --muted:42 30% 90%; --muted-foreground:60 1% 37%; --accent:42 30% 90%; --accent-foreground:0 0% 11%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:42 25% 87%; --input:42 25% 87%; --ring:28 53% 36%; } /* ===== 靛青（Stripe 亮 · 冷白+电光靛蓝）===== */ :root[data-skin="stripe"]{ --presentation:#ffffff; --surface-primary:#f6f9fc; --surface-primary-alt:#f6f9fc; --surface-primary-contrast:#eaf0f6; --surface-secondary:#f6f9fc; --surface-secondary-alt:#eaf0f6; --surface-tertiary:#eaf0f6; --surface-tertiary-alt:#eaf0f6; --surface-chat:#ffffff; --surface-dialog:#ffffff; --surface-active:#eaf0f6; --surface-active-alt:#dfe8f1; --surface-hover:#eaf0f6; --surface-hover-alt:#dfe8f1; --header-primary:#ffffff; --header-hover:#f6f9fc; --header-button-hover:#eaf0f6; --text-primary:#0d253d; --text-secondary:#425466; --text-secondary-alt:#425466; --text-tertiary:#8898aa; --border-light:#e3e8ee; --border-medium:#cfd7df; --border-medium-alt:#cfd7df; --border-heavy:#aab7c4; --brand-purple:#533afd; --ring-primary:#533afd; --surface-submit:#533afd; --surface-submit-hover:#4434d4; --radius:0.75rem; --app-font:"Sohne","Inter"; --background:0 0% 100%; --foreground:206 64% 15%; --card:206 60% 98%; --card-foreground:206 64% 15%; --popover:0 0% 100%; --popover-foreground:206 64% 15%; --primary:248 97% 61%; --primary-foreground:0 0% 100%; --secondary:210 43% 94%; --secondary-foreground:206 64% 15%; --muted:210 43% 94%; --muted-foreground:209 22% 33%; --accent:210 43% 94%; --accent-foreground:206 64% 15%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:213 27% 91%; --input:213 27% 91%; --ring:248 97% 61%; } /* ===== 暗夜蓝（Linear 暗 · 近黑+薰衣草蓝）===== */ :root[data-skin="linear"]{ --presentation:#0a0b0d; --surface-primary:#131417; --surface-primary-alt:#131417; --surface-primary-contrast:#1c1d21; --surface-secondary:#131417; --surface-secondary-alt:#1c1d21; --surface-tertiary:#1c1d21; --surface-tertiary-alt:#202226; --surface-chat:#0a0b0d; --surface-dialog:#131417; --surface-active:#202226; --surface-active-alt:#262830; --surface-hover:#1c1d21; --surface-hover-alt:#262830; --header-primary:#0a0b0d; --header-hover:#131417; --header-button-hover:#1c1d21; --text-primary:#f7f8f8; --text-secondary:#9ca3af; --text-secondary-alt:#9ca3af; --text-tertiary:#6b7280; --border-light:#2a2c32; --border-medium:#34363d; --border-medium-alt:#34363d; --border-heavy:#45474f; --brand-purple:#7c87e8; --ring-primary:#7c87e8; --surface-submit:#5e6ad2; --surface-submit-hover:#7c87e8; --radius:0.5rem; --app-font:"Inter"; --background:220 13% 5%; --foreground:180 5% 97%; --card:220 9% 8%; --card-foreground:180 5% 97%; --popover:222 8% 12%; --popover-foreground:180 5% 97%; --primary:232 56% 60%; --primary-foreground:0 0% 100%; --secondary:222 8% 12%; --secondary-foreground:180 5% 97%; --muted:222 8% 12%; --muted-foreground:218 11% 65%; --accent:222 8% 14%; --accent-foreground:180 5% 97%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:225 9% 18%; --input:225 9% 18%; --ring:232 56% 60%; } /* ===== 暖陶橙（Claude 亮暖 · 米白+暖橙）===== */ :root[data-skin="claude"]{ --presentation:#ffffff; --surface-primary:#f5f4ef; --surface-primary-alt:#f5f4ef; --surface-primary-contrast:#ece9e2; --surface-secondary:#f5f4ef; --surface-secondary-alt:#ece9e2; --surface-tertiary:#ece9e2; --surface-tertiary-alt:#ece9e2; --surface-chat:#faf9f7; --surface-dialog:#ffffff; --surface-active:#ece9e2; --surface-active-alt:#e3dfd6; --surface-hover:#ece9e2; --surface-hover-alt:#e3dfd6; --header-primary:#ffffff; --header-hover:#f5f4ef; --header-button-hover:#ece9e2; --text-primary:#1f1e1c; --text-secondary:#6b6862; --text-secondary-alt:#6b6862; --text-tertiary:#8a857c; --border-light:#e8e4dd; --border-medium:#d6d1c7; --border-medium-alt:#d6d1c7; --border-heavy:#bdb6a8; --brand-purple:#c2653f; --ring-primary:#d97757; --surface-submit:#d97757; --surface-submit-hover:#c2653f; --radius:0.75rem; --app-font:"Styrene","Inter"; --background:0 0% 100%; --foreground:40 6% 11%; --card:48 21% 95%; --card-foreground:40 6% 11%; --popover:0 0% 100%; --popover-foreground:40 6% 11%; --primary:16 60% 53%; --primary-foreground:0 0% 100%; --secondary:44 18% 90%; --secondary-foreground:40 6% 11%; --muted:44 18% 90%; --muted-foreground:43 4% 40%; --accent:44 18% 90%; --accent-foreground:40 6% 11%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:43 19% 89%; --input:43 19% 89%; --ring:16 60% 53%; } /* ===== 玄墨（Vercel 亮 · 极简黑白）===== */ :root[data-skin="vercel"]{ --presentation:#ffffff; --surface-primary:#fafafa; --surface-primary-alt:#fafafa; --surface-primary-contrast:#f0f0f0; --surface-secondary:#fafafa; --surface-secondary-alt:#f0f0f0; --surface-tertiary:#f0f0f0; --surface-tertiary-alt:#f0f0f0; --surface-chat:#ffffff; --surface-dialog:#ffffff; --surface-active:#f0f0f0; --surface-active-alt:#e6e6e6; --surface-hover:#f0f0f0; --surface-hover-alt:#e6e6e6; --header-primary:#ffffff; --header-hover:#fafafa; --header-button-hover:#f0f0f0; --text-primary:#0a0a0a; --text-secondary:#666666; --text-secondary-alt:#666666; --text-tertiary:#888888; --border-light:#e6e6e6; --border-medium:#d4d4d4; --border-medium-alt:#d4d4d4; --border-heavy:#b0b0b0; --brand-purple:#000000; --ring-primary:#000000; --surface-submit:#000000; --surface-submit-hover:#333333; --radius:0.5rem; --app-font:"Geist","Inter"; --background:0 0% 100%; --foreground:0 0% 4%; --card:0 0% 98%; --card-foreground:0 0% 4%; --popover:0 0% 100%; --popover-foreground:0 0% 4%; --primary:0 0% 7%; --primary-foreground:0 0% 100%; --secondary:0 0% 94%; --secondary-foreground:0 0% 4%; --muted:0 0% 94%; --muted-foreground:0 0% 40%; --accent:0 0% 94%; --accent-foreground:0 0% 4%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:0 0% 90%; --input:0 0% 90%; --ring:0 0% 7%; } /* ===== 宣纸白（Notion 亮 · 米白+人文蓝）===== */ :root[data-skin="notion"]{ --presentation:#ffffff; --surface-primary:#f7f6f3; --surface-primary-alt:#f7f6f3; --surface-primary-contrast:#efeee9; --surface-secondary:#f7f6f3; --surface-secondary-alt:#efeee9; --surface-tertiary:#efeee9; --surface-tertiary-alt:#efeee9; --surface-chat:#ffffff; --surface-dialog:#ffffff; --surface-active:#efeee9; --surface-active-alt:#e7e6df; --surface-hover:#efeee9; --surface-hover-alt:#e7e6df; --header-primary:#ffffff; --header-hover:#f7f6f3; --header-button-hover:#efeee9; --text-primary:#37352f; --text-secondary:#5f5e5a; --text-secondary-alt:#5f5e5a; --text-tertiary:#9b9a97; --border-light:#e9e9e7; --border-medium:#ddddda; --border-medium-alt:#ddddda; --border-heavy:#c4c4c1; --brand-purple:#2383e2; --ring-primary:#2383e2; --surface-submit:#2383e2; --surface-submit-hover:#1a6fc0; --radius:0.375rem; --app-font:"Inter"; --background:0 0% 100%; --foreground:43 9% 20%; --card:40 14% 96%; --card-foreground:43 9% 20%; --popover:0 0% 100%; --popover-foreground:43 9% 20%; --primary:210 76% 51%; --primary-foreground:0 0% 100%; --secondary:48 12% 93%; --secondary-foreground:43 9% 20%; --muted:48 12% 93%; --muted-foreground:40 2% 46%; --accent:48 12% 93%; --accent-foreground:43 9% 20%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:60 3% 91%; --input:60 3% 91%; --ring:210 76% 51%; } /* ===== 竹墨绿（Spotify 暗 · 黑底+荧光绿）===== */ :root[data-skin="spotify"]{ --presentation:#0f0f0f; --surface-primary:#181818; --surface-primary-alt:#181818; --surface-primary-contrast:#282828; --surface-secondary:#181818; --surface-secondary-alt:#282828; --surface-tertiary:#282828; --surface-tertiary-alt:#2e2e2e; --surface-chat:#0f0f0f; --surface-dialog:#181818; --surface-active:#2e2e2e; --surface-active-alt:#383838; --surface-hover:#282828; --surface-hover-alt:#383838; --header-primary:#0f0f0f; --header-hover:#181818; --header-button-hover:#282828; --text-primary:#ffffff; --text-secondary:#b3b3b3; --text-secondary-alt:#b3b3b3; --text-tertiary:#7a7a7a; --border-light:#2e2e2e; --border-medium:#3e3e3e; --border-medium-alt:#3e3e3e; --border-heavy:#535353; --brand-purple:#1ed760; --ring-primary:#1db954; --surface-submit:#1db954; --surface-submit-hover:#1ed760; --radius:1rem; --app-font:"Inter"; --background:0 0% 6%; --foreground:0 0% 100%; --card:0 0% 9%; --card-foreground:0 0% 100%; --popover:0 0% 9%; --popover-foreground:0 0% 100%; --primary:141 73% 42%; --primary-foreground:0 0% 100%; --secondary:0 0% 16%; --secondary-foreground:0 0% 100%; --muted:0 0% 16%; --muted-foreground:0 0% 70%; --accent:0 0% 16%; --accent-foreground:0 0% 100%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:0 0% 18%; --input:0 0% 18%; --ring:141 73% 42%; } /* ===== 玄铁红（Tesla 暗 · 纯黑+特斯拉红）===== */ :root[data-skin="tesla"]{ --presentation:#0a0a0a; --surface-primary:#141414; --surface-primary-alt:#141414; --surface-primary-contrast:#1f1f1f; --surface-secondary:#141414; --surface-secondary-alt:#1f1f1f; --surface-tertiary:#1f1f1f; --surface-tertiary-alt:#252525; --surface-chat:#0a0a0a; --surface-dialog:#141414; --surface-active:#252525; --surface-active-alt:#2e2e2e; --surface-hover:#1f1f1f; --surface-hover-alt:#2e2e2e; --header-primary:#0a0a0a; --header-hover:#141414; --header-button-hover:#1f1f1f; --text-primary:#ffffff; --text-secondary:#a8a8a8; --text-secondary-alt:#a8a8a8; --text-tertiary:#777777; --border-light:#2a2a2a; --border-medium:#3a3a3a; --border-medium-alt:#3a3a3a; --border-heavy:#4a4a4a; --brand-purple:#ff3b41; --ring-primary:#e82127; --surface-submit:#e82127; --surface-submit-hover:#ff3b41; --radius:0.25rem; --app-font:"Inter"; --background:0 0% 4%; --foreground:0 0% 100%; --card:0 0% 8%; --card-foreground:0 0% 100%; --popover:0 0% 8%; --popover-foreground:0 0% 100%; --primary:358 80% 53%; --primary-foreground:0 0% 100%; --secondary:0 0% 12%; --secondary-foreground:0 0% 100%; --muted:0 0% 12%; --muted-foreground:0 0% 66%; --accent:0 0% 12%; --accent-foreground:0 0% 100%; --destructive:0 72% 51%; --destructive-foreground:0 0% 100%; --border:0 0% 16%; --input:0 0% 16%; --ring:358 80% 53%; } /* ============================================================ 文字对比修复（Playwright 实测校准 2026-06-06） 覆盖 LibreChat 硬编码 gray/prose/dark 文字，强制跟随当前 skin 的语义色。 ============================================================ */ :root[data-skin] .prose, :root[data-skin] .prose *, :root[data-skin] [class*="whitespace-pre-wrap"], :root[data-skin] [class*="whitespace-pre-wrap"] *, :root[data-skin] .truncate, :root[data-skin] [class*="text-text-primary"], :root[data-skin] [class*="text-lg"], :root[data-skin] [class*="group/button"] { color: var(--text-primary) !important; } :root[data-skin] [class*="text-text-secondary"] { color: var(--text-secondary) !important; } :root[data-skin] .prose a { color: var(--brand-purple) !important; } :root[data-skin] .prose code { color: var(--text-primary) !important; background: var(--surface-tertiary) !important; } #app-skin-switcher, #app-skin-switcher select { color:#fff !important; } #app-skin-switcher option { color:#000 !important; } /* marketplace 卡片描述/tooltip 对比微调（Playwright 校准）*/ :root[data-skin] [class*="line-clamp"], :root[data-skin] [class*="line-clamp"] * { color: var(--text-secondary) !important; } :root[data-skin] [class*="tooltip"] { color: var(--text-primary) !important; background: var(--surface-dialog) !important; }