/* ========================================================================== * 主题切换（默认 / 深色） * · 通过 控制；不带属性（或 =default）= 默认主题（现状） * · 本文件只做「外观覆盖」，不动任何尺寸 / 布局 / 安全区变量 —— * 整份删掉即可回到默认外观（和 qq-theme.css 一样的设计原则） * · 必须放在 style.css、qq-theme.css 之后加载 * * ⚠️ 踩过的坑：项目里有不少**硬编码**的浅色背景（#fff/#F2F3F5…）和深色文字 * （#191919/#2B2F36…）。深色主题只换 CSS 变量是不够的 —— 那些硬编码的地方 * 会出现「深底 + 深字」直接看不见（动态页的昵称/正文就是这么消失的）。 * 所以下面除了换变量，还逐块覆盖了这些硬编码值。 * ========================================================================== */ /* ========================= 深色主题 ========================= */ html[data-theme="dark"]{ --bg:#0E1116; --card:#171B21; --line:#262C35; /* 主文字色：原来是 #E7E9EC（接近纯白），在深色底上太扎眼 —— 按「白色一律用浅灰替代」的原则调成浅灰（对比度仍有 11 倍，看得清且不刺眼） */ --text:#CFD4DB; --text-2:#98A0AB; --text-3:#6D7580; --brand-blue:#3D9BFF; --brand-blue-d:#2E86E0; --red:#FF6B6B; /* 按压态：深色下不能用浅灰/白（一点就闪一大片）。 ⚠️ 必须用**不透明**颜色（不能用 rgba 半透明白）： 会话列表的「置顶/删除」按钮藏在 .row 底下（.row 自己没有背景， 全靠 :active 的背景把它盖住）。半透明会让按钮在按住时透出来。 */ --press:#252C34; } html[data-theme="dark"] body{background:var(--bg);color:var(--text);} /* ---- 1. 页面 / 顶栏 / 列表 / 卡片：白底一律换成卡片色 ---- */ html[data-theme="dark"] .topbar:not(.qz-topbar), html[data-theme="dark"] .list, html[data-theme="dark"] .view, html[data-theme="dark"] .pub-head:not(.qz-topbar), html[data-theme="dark"] .chat-head, html[data-theme="dark"] .set-group, html[data-theme="dark"] .drawer, html[data-theme="dark"] .drawer-card, html[data-theme="dark"] .qz-list .moment, html[data-theme="dark"] .qz-list .cm-empty, html[data-theme="dark"] .tabbar, html[data-theme="dark"] .mall-top, html[data-theme="dark"] .mall-cate, html[data-theme="dark"] .mall-tabbar, html[data-theme="dark"] .pdd-item, html[data-theme="dark"] .pdd-dcard, html[data-theme="dark"] .game-card, html[data-theme="dark"] .pn-item, html[data-theme="dark"] .pn-tab, html[data-theme="dark"] .bill-list, html[data-theme="dark"] .wallet-stat, html[data-theme="dark"] .vip-plan, html[data-theme="dark"] .wallet-more, html[data-theme="dark"] .of-row, html[data-theme="dark"] .shop-bar, html[data-theme="dark"] .bill-month, html[data-theme="dark"] .bill-month-x, html[data-theme="dark"] .pay-quick button, html[data-theme="dark"] .dlg, html[data-theme="dark"] .sheet, html[data-theme="dark"] .func-panel, html[data-theme="dark"] .emoji-panel, html[data-theme="dark"] .plus-menu, html[data-theme="dark"] .msg-menu, html[data-theme="dark"] .profile-card, html[data-theme="dark"] .login-card{background:var(--card);color:var(--text);} html[data-theme="dark"] .app, html[data-theme="dark"] .login-page{background:var(--bg);} /* 聊天页背景画在固定层 ::before 上（键盘弹起不跟着抬） */ html[data-theme="dark"] .chat-page::before{background:var(--chat-bg,var(--bg));} /* ---- 2. 分隔线 / 描边 ---- */ html[data-theme="dark"] .row::after, html[data-theme="dark"] .set-row::after{background:var(--line);} html[data-theme="dark"] .set-row, html[data-theme="dark"] .bill-row, html[data-theme="dark"] .chat-head, html[data-theme="dark"] .pub-head:not(.qz-topbar), html[data-theme="dark"] .chat-input, html[data-theme="dark"] .drawer-logout, html[data-theme="dark"] .sheet-head, html[data-theme="dark"] .sheet-input{border-color:var(--line);} /* ---- 3. 文字：硬编码的深色文字改成亮色（⭐ 动态页就在这里） ---- */ html[data-theme="dark"] .moment-name{color:#7FB4FF;} /* 动态昵称：默认是深蓝，换亮蓝 */ html[data-theme="dark"] .moment-text, html[data-theme="dark"] .cm-text, html[data-theme="dark"] .dlg-text, html[data-theme="dark"] .dlg-btn, html[data-theme="dark"] .set-label, html[data-theme="dark"] .pub-label, html[data-theme="dark"] .ep-row-label, html[data-theme="dark"] .about-desc, html[data-theme="dark"] .about-list b, html[data-theme="dark"] .chat-more-row, html[data-theme="dark"] .text-btn, html[data-theme="dark"] .game-name, html[data-theme="dark"] .mall-me-name, html[data-theme="dark"] .pdd-dname, html[data-theme="dark"] .gj-name, html[data-theme="dark"] .gm-name, html[data-theme="dark"] .pn-bar-main b, html[data-theme="dark"] .pn-no, html[data-theme="dark"] .pc-sign, html[data-theme="dark"] .pdd-name, html[data-theme="dark"] .plus-item, html[data-theme="dark"] .nt-text, html[data-theme="dark"] .sel-copy, html[data-theme="dark"] .wal-title, html[data-theme="dark"] .bd-row b, html[data-theme="dark"] .dlg-input, html[data-theme="dark"] .mall-search input, html[data-theme="dark"] .wallet-balance, html[data-theme="dark"] .bill-bal-num{color:var(--text);} /* ---- 3.1 顶栏图标按钮 ⭐ ---- qq-theme 里写死了 .icon-btn{color:var(--text)}（近黑）。 深色主题下顶栏那一排按钮（返回 / 右上角「+」/ 更多 / 电话 / 关闭…） 全变成黑图标 → 整个「看不见 / 点不出来」。 注意两处要单独保住： · .qz-topbar .icon-btn 浮在封面上，必须还是白色 · .icon-btn.on 语音按钮的激活态，必须还是品牌蓝 */ html[data-theme="dark"] .icon-btn{color:var(--text);} html[data-theme="dark"] .qz-topbar .icon-btn{color:#fff;} html[data-theme="dark"] .icon-btn.on{color:var(--brand-blue);} /* 登录中浮层 / 「选择复制」弹层：底色和文字一起换 */ html[data-theme="dark"] .login-loading{background:rgba(20,25,31,.86);color:var(--text);} html[data-theme="dark"] .sel-copy{background:#222831;border-color:var(--line);} html[data-theme="dark"] .quick-txt, html[data-theme="dark"] .row-desc, html[data-theme="dark"] .set-value, html[data-theme="dark"] .wal-time, html[data-theme="dark"] .about-note, html[data-theme="dark"] .gj-sub, html[data-theme="dark"] .dlg-label{color:var(--text-2);} /* ---- 4. 输入 / 次要填充：比卡片再亮一点点 ---- */ html[data-theme="dark"] .search, html[data-theme="dark"] .chat-input textarea, html[data-theme="dark"] .dlg-input, html[data-theme="dark"] .dlg-friends, html[data-theme="dark"] .login-input, html[data-theme="dark"] .login-tabs, html[data-theme="dark"] .voice-hold, html[data-theme="dark"] .pay-note-row, html[data-theme="dark"] .bill-day, html[data-theme="dark"] .emoji-img, html[data-theme="dark"] .chat-more-row, html[data-theme="dark"] .gm-btn, html[data-theme="dark"] .fr-btn.gray, html[data-theme="dark"] .pc-btn.ghost, html[data-theme="dark"] .gj-tag.on, html[data-theme="dark"] #payCoins{background:#222831;color:var(--text);} html[data-theme="dark"] .chat-input textarea::placeholder, html[data-theme="dark"] .dlg-input::placeholder, html[data-theme="dark"] .login-input::placeholder{color:var(--text-3);} /* ---- 5. 弹窗按钮 ---- */ html[data-theme="dark"] .dlg-btn{background:#2A313A;color:var(--text);} html[data-theme="dark"] .dlg-btn.primary{background:var(--brand-blue);color:#fff;} html[data-theme="dark"] .dlg-btn.danger{background:var(--red);color:#fff;} html[data-theme="dark"] .login-tab.active{background:var(--card);} /* ---- 6. 聊天页 ---- */ html[data-theme="dark"] .msg-bubble{background:#242B34;color:var(--bubble-fg,#E9ECF1);box-shadow:none;} html[data-theme="dark"] .msg-bubble::after{border-right-color:#242B34;} html[data-theme="dark"] .msg.me .msg-bubble{background:var(--bubble-me-bg,linear-gradient(135deg,#3AA5FF,#0A6BFF));color:#fff;} html[data-theme="dark"] .msg.me .msg-bubble::after{border-right-color:transparent;} /* 红包 / 转账卡片是「卡片」不是气泡：深色下也要保住自己的渐变， 否则会被上面那两条气泡底色刷成普通气泡（浅色主题下没这问题）。 选择器要写到 .msg.me 那一档，才压得住上面 html[...] .msg.me .msg-bubble。 */ html[data-theme="dark"] .msg-bubble.rp-bubble, html[data-theme="dark"] .msg.me .msg-bubble.rp-bubble{ background:linear-gradient(135deg,#FBAA4E 0%,#F0821F 100%);color:#fff; } html[data-theme="dark"] .msg-bubble.tr-bubble, html[data-theme="dark"] .msg.me .msg-bubble.tr-bubble{ background:linear-gradient(135deg,#48D287 0%,#17A85D 100%);color:#fff; } html[data-theme="dark"] .msg-name, html[data-theme="dark"] .msg-time, html[data-theme="dark"] .chat-time, html[data-theme="dark"] .moment-foot .act{color:var(--text-3);} html[data-theme="dark"] .chat-input .icon-btn{color:var(--text-2);} html[data-theme="dark"] .msg-quote, html[data-theme="dark"] .quote-bar{background:#222831;border-color:var(--line);} /* ---- 6.1 「＋」面板 / 表情面板：深色下不能还是浅色方块（2026-10-16 修） qq-theme.css 里 .func-ico 写死了 background:#F4F6FA、.func-item 写死了 color:var(--text-2)， 深色主题原来只覆盖了「按下」那一档（见下面第 10 节）， 所以常态下是「深色面板上摆着一排白色方块 + 深灰小字」，又亮又看不清。 这里换成主题色：方块 = 和输入框同一档的深色填充，图标（currentColor）和文字一起变浅灰。 */ html[data-theme="dark"] .func-ico{background:#222831;} html[data-theme="dark"] .func-item{color:var(--text-2);} /* ---- 6.2 侧边栏（抽屉）菜单图标：深色主题的那一套配色（2026-10-16） 默认主题那套在 style.css 的抽屉段（浅底 + 深色图标）； 深色下换成「压暗的底 + 提亮的图标」，5 个菜单一一对应。 图标本身走 currentColor（= --qi-fg），所以只改这两个变量。 */ html[data-theme="dark"] .drawer-item[data-icon="wallet"] .qi{--qi-bg:#14304A;--qi-fg:#6FB4FF;} html[data-theme="dark"] .drawer-item[data-icon="pretty"] .qi{--qi-bg:#3A2E12;--qi-fg:#E8B94A;} html[data-theme="dark"] .drawer-item[data-icon="vip"] .qi{--qi-bg:#3A211D;--qi-fg:#FF7A63;} html[data-theme="dark"] .drawer-item[data-icon="music"] .qi{--qi-bg:#123039;--qi-fg:#4FD1EF;} html[data-theme="dark"] .drawer-item[data-icon="theme"] .qi{--qi-bg:#262347;--qi-fg:#A79BFF;} html[data-theme="dark"] .drawer-item[data-icon="settings"].qi{--qi-bg:#262C35;--qi-fg:#98A0AB;} /* ---- 7. 带色的按压态（退出登录是红底，保持红色调暗一档）---- */ html[data-theme="dark"] .drawer-logout:active{background:#2A1C1E;} /* ---- 8. 杂项 ---- */ html[data-theme="dark"] .plus-menu::before{border-bottom-color:var(--card);} html[data-theme="dark"] .bill-balance, html[data-theme="dark"] .qz-list .moment{box-shadow:none;} html[data-theme="dark"] .toast{background:rgba(58,64,72,.96);} /* ---- 8.1 还残留的白底（深色下这些区域本来是纯白）---- */ html[data-theme="dark"] .mall-me-head, html[data-theme="dark"] .pdd-bar{background:var(--card);} html[data-theme="dark"] .pdd-bar{border-top-color:var(--line);} html[data-theme="dark"] .mall-w-btn{background:#222831;color:#FF7B7B;} html[data-theme="dark"] .login-input:focus{background:#222831;} html[data-theme="dark"] .switch{background:#2C333C;} /* qq-theme 里又写死 #fff 的两处： · .quick 联系人页那排功能入口的整块底色 · .sheet.popup .sheet-head 各类弹窗（官方公告 / 收款码 / 付款码…）的标题栏 */ html[data-theme="dark"] .quick{background:var(--card);border-bottom-color:var(--line);} html[data-theme="dark"] .sheet.popup .sheet-head{background:var(--card);} /* 说明：下面这些「白」故意保留 —— 它们都在**彩色 / 渐变底**上， 换成浅灰会显得脏（不是界面底色上的白）： · .qz-topbar .title / .qz-topbar .icon-btn → 浮在封面渐变上 · .msg.me .msg-bubble → 蓝色渐变气泡 · .dlg-btn.primary / .dlg-btn.danger → 蓝 / 红按钮 · .tr-bubble .tr-btn → 转账气泡上的白按钮 · .crop-zoom 滑杆圆点 → 裁剪页本身是深色底 · .pq-qr → 二维码必须白底才扫得出来 */ /* ---- 9. 封面上的「透明顶栏」：动态页是 .topbar.qz-topbar， 别人的动态页是 .pub-head.qz-topbar —— 两者都浮在封面图上， 基础样式里是 transparent。 ⚠️ 深色主题里**千万别**用 `.topbar` / `.pub-head` 通配刷背景， 那会把这一层也刷成深色，封面顶部就多出一层黑挡住图。 （和 docs/ui-conventions.md 第五节第 12 条记的是同一个坑，白色主题当初也踩过） 这里再显式钉一次，以后加通用规则也不怕被盖掉。 */ html[data-theme="dark"] .topbar.qz-topbar, html[data-theme="dark"] .pub-head.qz-topbar{background:transparent;border-bottom:0;} html[data-theme="dark"] .qz-topbar .title, html[data-theme="dark"] .qz-topbar .pub-title{color:#fff;} /* 动态列表底色比卡片再深一档，卡片边界才分得出来 */ html[data-theme="dark"] .qz-list, html[data-theme="dark"] .moment-list{background:var(--bg);} /* ---- 10. 按压态（点一下的反馈）---- 主题层里这些 :active 原本都是 #F2F2F2 / #F5F7FB / #EFF4FF 这类浅色， 深色下面一点就闪出一大片白、非常扎眼。这里统一换成 --press（淡白叠加）。 ⚠️ 只改「铺在白/灰底上的」按钮；浮在渐变卡 / 封面图上的 （.wallet-btn、.shop-bar-btn、.qz-topbar .icon-btn、.cover-edit…） 本来就是半透明白，深色下照样正常，不动。 */ html[data-theme="dark"] .icon-btn:active, html[data-theme="dark"] .row:active, html[data-theme="dark"] #chatList .row:active, html[data-theme="dark"] #contactList .row:active, html[data-theme="dark"] .quick-item:active, html[data-theme="dark"] .drawer-item:active, html[data-theme="dark"] .plus-item:active, html[data-theme="dark"] .set-row:active, html[data-theme="dark"] .game-card:active, html[data-theme="dark"] .pub-add:active, html[data-theme="dark"] .ep-row:active, html[data-theme="dark"] .ep-clear:active, html[data-theme="dark"] .chat-more-row:active, html[data-theme="dark"] .pc-tag.no:active, html[data-theme="dark"] .quote-bar-x:active, html[data-theme="dark"] .jump-row:active, html[data-theme="dark"] .app-tool:active, html[data-theme="dark"] .of-row:active, html[data-theme="dark"] .srch-row:active, html[data-theme="dark"] .nc-row:active, html[data-theme="dark"] .bill-row:active, html[data-theme="dark"] .gj-item:active, html[data-theme="dark"] .moment-foot .act span:active, html[data-theme="dark"] .bill-tab:active, html[data-theme="dark"] .bill-month:active, html[data-theme="dark"] .bill-month-x:active, html[data-theme="dark"] .pay-quick button:active, html[data-theme="dark"] .cm-reply-btn:active, html[data-theme="dark"] .cm-at-chip:active, html[data-theme="dark"] .cm-at-btn:active, html[data-theme="dark"] .func-item:active .func-ico, html[data-theme="dark"] .wallet-more:active, html[data-theme="dark"] .text-btn:active, html[data-theme="dark"] .bill-count:active{background:var(--press);} /* 带色的按压态：不能变亮白，改成半透明的同色 */ html[data-theme="dark"] .cm-del-btn:active{background:rgba(250,81,81,.22);} html[data-theme="dark"] .rp-close:active{background:rgba(255,255,255,.25);} html[data-theme="dark"] .gj-tag:active{background:var(--brand-blue-d);} html[data-theme="dark"] .swipe-act:active{filter:brightness(1.12);} /* ---- 11. 游戏中心 / 应用中心 / 官方店铺 ⭐ ---- 这几页是「商城风格」，用的是**另一套类名**（.mall-* / .game-* / .pdd-* / .of-*）， 底色大量写死成 #F5F6F8 / #F2F3F5 / #F2F6FB 这类浅色， 深色主题下会「一片惨白」，必须单独覆盖。 */ /* 11.1 页面 / 面板底：用比卡片更深的底色，卡片才浮得起来 */ html[data-theme="dark"] .mall-pane, html[data-theme="dark"] .pdd-detail{background:var(--bg);} /* 11.2 浅色填充块（搜索框 / 分类标签 / 图标底 / 图片占位 / 灰按钮） */ html[data-theme="dark"] .mall-search, html[data-theme="dark"] .pdd-tab, html[data-theme="dark"] .game-ico, html[data-theme="dark"] .pdd-pic, html[data-theme="dark"] .pdd-hero, html[data-theme="dark"] .of-btn.gray, html[data-theme="dark"] .game-tag.gray{background:#222831;color:var(--text-2);} /* 11.3 浅蓝标签 → 半透明品牌蓝 */ html[data-theme="dark"] .game-tag{background:rgba(61,155,255,.18);color:var(--brand-blue);} /* 11.4 ⚠️ 上面刷了基类，这些「变体」必须再钉一次 —— 否则会被一起刷掉 （选择器都是 (0,3,1) 打 (0,2,0)，不钉就丢） */ html[data-theme="dark"] .pdd-tab.active{background:#E02E24;color:#fff;} html[data-theme="dark"] .mall-w-btn.ghost{background:rgba(255,255,255,.22);color:#fff;} html[data-theme="dark"] .game-tag.gray{background:#262C35;color:var(--text-2);} /* 11.5 开关（关状态是浅灰白，深色下要压暗；开状态保持品牌蓝） */ html[data-theme="dark"] .switch.on{background:var(--brand-blue);} html[data-theme="dark"] .switch i{background:#DDE1E6;} /* ---- 12. 分割线 / 描边 ⭐ ---- 项目里分割线有两种写法，深色下都会变成「亮白线」，必须都覆盖： · qq-theme：border-xxx:1px solid #EBEBEB · style.css：border-xxx:1px solid #F2F2F2 统一成 border-color:var(--line)（只改颜色，粗细/位置不动）。 */ html[data-theme="dark"] .tabbar, html[data-theme="dark"] .mall-tabbar, html[data-theme="dark"] .pdd-bar, html[data-theme="dark"] .pn-tab, html[data-theme="dark"] .pub-row, html[data-theme="dark"] .drawer-menu .drawer-item + .drawer-item, html[data-theme="dark"] .plus-item + .plus-item, html[data-theme="dark"] .jump-row, html[data-theme="dark"] .of-row, html[data-theme="dark"] .mo-row, html[data-theme="dark"] .srch-row, html[data-theme="dark"] .bill-day, html[data-theme="dark"] .bill-list, html[data-theme="dark"] .moment, html[data-theme="dark"] .gi-item, html[data-theme="dark"] .gm-row{border-color:var(--line);} /* 虚线框 / 彩色的描边单独调（不能用 --line，会糊在一起） */ html[data-theme="dark"] .pub-add{border-color:#3A424D;background:#1C232B;} html[data-theme="dark"] .msg-quote{border-left-color:#4A525C;} html[data-theme="dark"] .cm-at-chip, html[data-theme="dark"] .bill-month{border-color:#2C3742;} html[data-theme="dark"] .vip-plan.owned{border-color:var(--line);background:#1C232B;} /* ---- 13. 群相关：群管理页的浅色标签/按钮 ---- （.gm-* 都是浅蓝/浅红底，深色下会「一片惨白」） */ html[data-theme="dark"] .gm-badge{background:#22313F;color:#7FB4FF;} html[data-theme="dark"] .gm-badge.admin{background:#1E3247;color:#7FB4FF;} html[data-theme="dark"] .gm-badge.mute{background:#3A2426;color:#FF8A8A;} /* ⚠️ .gm-btn 的基类在 11.x 已被统一刷成深色，这两个变体必须再钉一次，否则丢色 */ html[data-theme="dark"] .gm-btn.danger{background:#3A2426;color:var(--red);} html[data-theme="dark"] .gm-btn.blue{background:#1E3247;color:#7FB4FF;} html[data-theme="dark"] .chat-input.muted textarea{background:#222831;color:var(--text-2);} /* 自己发的图片气泡（外面那圈 3px 白边） */ html[data-theme="dark"] .msg-bubble.img, html[data-theme="dark"] .msg.me .msg-bubble.img{background:#242B34;} /* ---- 14. 「置顶」的会话行 ⭐ ---- 置顶后行上会加 .pinned，底色是一层**浅蓝白**（#F8FAFF / #F7F7F7 / #FAFBFC）， 深色主题下就成了一块扎眼的白（之前误判成官方群头像的问题，病根其实在这）。 深色下换成一档「偏蓝的深色」：既压住白色，又保留「这行是置顶的」视觉提示。 */ html[data-theme="dark"] .row.pinned, html[data-theme="dark"] #chatList .row.pinned{background:#1B2836;} /* ---- 15. 资料卡片（点头像弹出的那张）---- .pc-tag（泡泡号/关系标签）和 .pc-sign（签名）在主题层里都是**浅底**， 之前只覆盖了它们的文字色、漏了背景 —— 深色下就是两块白。 */ html[data-theme="dark"] .pc-tag, html[data-theme="dark"] .pc-sign{background:#222831;color:var(--text-2);} /* 「好友」标签是浅蓝底，深色下换成半透明品牌蓝 */ html[data-theme="dark"] .pc-tag.rel.friend{background:rgba(61,155,255,.18);color:var(--brand-blue);} /* ---- 16. 深色主题下的「白描边」---- 几个角标 / 小圆点是用**白色描边**画的（qq-theme / style.css 里写死的 #fff）： 浅色主题下它是"从背景里抠出来"的效果，深色下就成了一整圈刺眼的白边。 统一改成跟着卡片色走（深色 → 深色描边），和背景融为一体。 */ html[data-theme="dark"] .tab-badge, html[data-theme="dark"] .dot-badge, html[data-theme="dark"] .avatar .dot{border-color:var(--card);} /* .quick-ico 里那个小圆点的白边是 box-shadow 画的，border-color 管不着，单独改 */ html[data-theme="dark"] .quick-ico .dot-badge{box-shadow:0 0 0 2px #000000;} /* 大号头像（抽屉头 / 动态封面 / 通话页…）也有一圈白描边： 保留「从背景里浮起来」的层次感，但换成**半透明白** —— 深色下不再是一圈扎眼的白。 */ html[data-theme="dark"] .avatar.lg{box-shadow:0 0 0 2.5px rgba(255,255,255,.22);} html[data-theme="dark"] .avatar.xl{box-shadow:0 0 0 3px rgba(255,255,255,.20);} /* ---- 17. 功能入口的图标块 ---- 深色主题下一律**纯黑底**（图案是白的）。 加 !important 是有意的：App 里那层底是 JS 写的内联样式， 内联优先级最高，只有 !important 能盖住 —— 这样即使 App 还是旧包 （内联设的是彩色渐变），深色下也照样是黑底，不会露出彩色/白边。 ⚠️ 千万别在这里加 overflow:hidden：会把右上角的未读小红点裁掉半圈。 */ html[data-theme="dark"] .quick-ico{background:#000000 !important;} /* ========================= 主题选择弹窗 ========================= */ .theme-list{padding:2px 0;} .theme-item{ display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:10px; border-radius:12px;border:1.5px solid var(--line);transition:.15s; } .theme-item:last-child{margin-bottom:0;} .theme-item.active{border-color:var(--brand-blue);background:#F2F8FF;} html[data-theme="dark"] .theme-item.active{background:#1B2836;} .th-main{flex:1;min-width:0;} .th-name{font-size:14.5px;font-weight:600;} .th-desc{font-size:11.5px;color:var(--text-2);margin-top:2px;} .th-check{ flex:0 0 auto;width:20px;height:20px;border-radius:50%;font-size:12px;line-height:20px; text-align:center;color:#fff;background:var(--brand-blue);opacity:0;transition:.15s; } .theme-item.active .th-check{opacity:1;} /* ============================================================ 个性装扮 · 全局主题（全局化，和「自定义主题」同一套思路） 以前每个主题只改「品牌色 + 一个很淡的 --bg」，而顶栏/列表/底栏/卡片 在 qq-theme.css 里全写死成 #fff / var(--card)，所以换主题几乎看不出区别。 现在： ① 每个主题把 --bg（页面）、--card（卡片/列表/弹层）、--line（分隔线） 一起染成主题色 —— 所有用变量的地方自动跟着变，这是「全局化」的关键； ② 底色铺在**最底层容器**（.app / .drawer / .pub-page / .chat-page）， 中间层（.view / .list / .pub-body …）透明，跟自定义主题的做法一致； ③ 少数写死 #fff 的地方（顶栏 / 底栏 / 设置卡片 / 商城卡…）单独覆盖。 前端切换时 data-theme 回到 default（浅色），再挂 data-deco-theme=key， 所以这些覆盖只在「用了装扮主题」时生效，基础主题 / 深色主题不受影响。 ============================================================ */ html[data-deco-theme] { --deco-bar:#FFFFFF; --deco-card:#FFFFFF; --deco-page:#F2F3F5; } html[data-deco-theme="t_green"] { --brand-blue:#07C160; --brand-blue-d:#05A150; --bg:#C6EBD7; --card:#EAF9F1; --line:#A9DCBE; --deco-bar:#D8F4E4; --deco-card:#EAF9F1; --deco-page:linear-gradient(180deg,#BFE8D2,#EAF9F1); --chat-bg:linear-gradient(180deg,#C6EBD7,#ECFAF2); --chat-head-bg:#D8F4E4; --chat-input-bg:#D8F4E4; --chat-body-bg:linear-gradient(180deg,#D6F2E2,#F3FCF7); --qq-grad:linear-gradient(135deg,#07C160,#05A150); } html[data-deco-theme="t_pink"] { --brand-blue:#FF5C90; --brand-blue-d:#EE3E76; --bg:#FAC9DD; --card:#FDE7F1; --line:#F5AECD; --deco-bar:#FFDAEA; --deco-card:#FDE7F1; --deco-page:linear-gradient(180deg,#F9C0D8,#FDE7F1); --chat-bg:linear-gradient(180deg,#FAC9DD,#FDEEF5); --chat-head-bg:#FFDAEA; --chat-input-bg:#FFDAEA; --chat-body-bg:linear-gradient(180deg,#FBD7E6,#FFF4F9); --qq-grad:linear-gradient(135deg,#FF5C90,#EE3E76); } html[data-deco-theme="t_blue"] { --brand-blue:#2E5BFF; --brand-blue-d:#1A44E6; --bg:#C6D8FF; --card:#E6EFFF; --line:#A9C2F7; --deco-bar:#D6E4FF; --deco-card:#E6EFFF; --deco-page:linear-gradient(180deg,#BED2FF,#E6EFFF); --chat-bg:linear-gradient(180deg,#C6D8FF,#EAF2FF); --chat-head-bg:#D6E4FF; --chat-input-bg:#D6E4FF; --chat-body-bg:linear-gradient(180deg,#D5E2FF,#F2F7FF); --qq-grad:linear-gradient(135deg,#2E5BFF,#1A44E6); } /* ---- VIP 三件套（红色系）：烈焰红 / 玫瑰红 / 酒红 ---- 三套都是「红为主」，但**红的分量**明显不同（这是关键： 以前三套底色都是同一个淡粉，只有小按钮变色，所以看着一模一样）： 烈焰红 = 暖亮红：底色偏橙红、最浅最亮，强调色正红 玫瑰红 = 冷玫红：底色偏品红/洋红，强调色玫红 酒红 = 浓暗红：底色明显更深更闷，强调色暗酒红（按钮/气泡都压得住） ⚠️ 页面底（--deco-page）用**渐变** + 饱和度给足：整屏染色面积大， 色相 / 明度 / 浓淡的差别一下就看出来了（太淡会变成一片水洗粉）。 */ html[data-deco-theme="t_red"] { --brand-blue:#E8455F; --brand-blue-d:#D22A27; --bg:#FFC9B8; --card:#FFE7DE; --line:#FFA98F; --deco-bar:#FFD8C9; --deco-card:#FFE7DE; --deco-page:linear-gradient(180deg,#FFBBA7,#FFE3D8); --chat-bg:linear-gradient(180deg,#FFC3B1,#FFE6DC); --chat-head-bg:#FFD8C9; --chat-input-bg:#FFD8C9; --chat-body-bg:linear-gradient(180deg,#FFD1C1,#FFF1E9); --qq-grad:linear-gradient(135deg,#F04A32,#E8455F); } html[data-deco-theme="t_rose"] { --brand-blue:#E93B7A; --brand-blue-d:#C4188C; --bg:#F8B7D8; --card:#FDE0F0; --line:#F394C9; --deco-bar:#FFCBEA; --deco-card:#FDE0F0; --deco-page:linear-gradient(180deg,#F7A6D1,#FDDDEE); --chat-bg:linear-gradient(180deg,#F8AFD5,#FDE5F4); --chat-head-bg:#FFCBEA; --chat-input-bg:#FFCBEA; --chat-body-bg:linear-gradient(180deg,#FBC4E1,#FFEFF8); --qq-grad:linear-gradient(135deg,#F02E8E,#C4188C); } html[data-deco-theme="t_wine"] { --brand-blue:#8E1729; --brand-blue-d:#650E1B; --bg:#DF8B9B; --card:#F2CDD3; --line:#B76A78; --deco-bar:#E6AEB8; --deco-card:#F2CDD3; --deco-page:linear-gradient(180deg,#CE7586,#EDC1C9); --chat-bg:linear-gradient(180deg,#D58394,#EFC6CD); --chat-head-bg:#E6AEB8; --chat-input-bg:#E6AEB8; --chat-body-bg:linear-gradient(180deg,#DC9AA7,#F5DDE1); --qq-grad:linear-gradient(135deg,#A31C33,#650E1B); } /* ---- SVIP 三件套（金色系）：鎏金 / 香槟金 / 古铜金 ---- 金色最容易糊成一片，所以三套按「亮的金 / 粉的金 / 深的金」拉开， 底色饱和度给足（金要出金属感，不能水洗），并保持各自的高级感： 鎏金 = 亮金黄：最亮最艳，暖黄底 + 深金强调色（按钮上才压得住白字） 香槟金 = 玫瑰金：偏粉橘的香槟色，柔和高档 古铜金 = 深古铜：明度明显更低、饱和更高，最沉最贵气 同样用**渐变页面底**，整屏染色面积大，三套一眼能分清。 */ html[data-deco-theme="t_gold"] { --brand-blue:#B87A00; --brand-blue-d:#8A5C00; --bg:#FFD98A; --card:#FFF0CC; --line:#F0BE55; --deco-bar:#FFE6A8; --deco-card:#FFF0CC; --deco-page:linear-gradient(180deg,#FFD074,#FFF0CC); --chat-bg:linear-gradient(180deg,#FFD98A,#FFF4D8); --chat-head-bg:#FFE6A8; --chat-input-bg:#FFE6A8; --chat-body-bg:linear-gradient(180deg,#FFDFA0,#FFF8E2); --qq-grad:linear-gradient(135deg,#E8A400,#B87A00); } html[data-deco-theme="t_champ"] { --brand-blue:#B4713F; --brand-blue-d:#8F5426; --bg:#F8D2B4; --card:#FDECDC; --line:#EDCCA9; --deco-bar:#FBDFC6; --deco-card:#FDECDC; --deco-page:linear-gradient(180deg,#F8CFB2,#FEEDE0); --chat-bg:linear-gradient(180deg,#F8D2B4,#FEF2E6); --chat-head-bg:#FBDFC6; --chat-input-bg:#FBDFC6; --chat-body-bg:linear-gradient(180deg,#FADBC2,#FEF6EC); --qq-grad:linear-gradient(135deg,#D08A5C,#A85F30); } html[data-deco-theme="t_bronze"] { --brand-blue:#6E4306; --brand-blue-d:#4A2C00; --bg:#DDA23F; --card:#F0DDB6; --line:#C08C31; --deco-bar:#E6B45F; --deco-card:#F0DDB6; --deco-page:linear-gradient(180deg,#CE8B28,#E8C889); --chat-bg:linear-gradient(180deg,#D99C39,#EFD5A5); --chat-head-bg:#E6B45F; --chat-input-bg:#E6B45F; --chat-body-bg:linear-gradient(180deg,#DFA94E,#F6E4C2); --qq-grad:linear-gradient(135deg,#A9720E,#5E3800); } /* 底色饱和度提上来以后，原来的中性灰次级文字会「糊」在色底上 —— 每个主题给一版更深的 --text-2 / --text-3（只在挂 data-deco-theme 时生效）。 */ html[data-deco-theme="t_green"]{ --text-2:#587263; --text-3:#87A092; } html[data-deco-theme="t_pink"] { --text-2:#86606E; --text-3:#A98895; } html[data-deco-theme="t_blue"] { --text-2:#5A6A88; --text-3:#8A96AF; } html[data-deco-theme="t_red"] { --text-2:#8A5450; --text-3:#AD807B; } html[data-deco-theme="t_rose"] { --text-2:#8A5670; --text-3:#AC8598; } html[data-deco-theme="t_wine"] { --text-2:#684349; --text-3:#8D6E75; } html[data-deco-theme="t_gold"] { --text-2:#7A5A18; --text-3:#9E833C; } html[data-deco-theme="t_champ"]{ --text-2:#7C5A42; --text-3:#A08468; } html[data-deco-theme="t_bronze"]{ --text-2:#5A3C10; --text-3:#8A6A2E; } /* ---- ① 底色铺在最底层容器（自定义主题也是这么干的）---- ⚠️ 聊天页单独走 --chat-bg：这样「装扮 › 背景」还能继续覆盖它（那条规则在文件后面）。 */ html[data-deco-theme] .app, html[data-deco-theme] .drawer, html[data-deco-theme] .pub-page { background: var(--deco-page); } /* 聊天页背景画在固定层 ::before 上（键盘弹起不跟着抬，见 style.css） */ html[data-deco-theme] .chat-page::before { background: var(--chat-bg, var(--deco-page)); } /* ② 中间层透明：让底色一路透上来（原来 .list / .quick / .moment-list 写死 #fff， 不退掉的话只有顶栏变色、列表还是一大片白，看着就"没全局化"）。 */ html[data-deco-theme] .view, html[data-deco-theme] .list, html[data-deco-theme] .quick, html[data-deco-theme] .moment-list, html[data-deco-theme] .set-body, html[data-deco-theme] .pub-body, html[data-deco-theme] .qz-list .cm-empty, html[data-deco-theme] .row, html[data-deco-theme] .quick-item, html[data-deco-theme] .drawer-item, html[data-deco-theme] .set-row { background: transparent; } /* ③ 顶栏 / 底栏 / 弹层头：比页面再浅一档，层次清楚 ⚠️ 聊天页顶栏、输入栏走 --chat-head-bg / --chat-input-bg（上面已给）， 这样「装扮 › 聊天主题」还能继续覆盖它们。 */ html[data-deco-theme] .topbar:not(.qz-topbar), html[data-deco-theme] .pub-head:not(.qz-topbar), html[data-deco-theme] .tabbar, html[data-deco-theme] .sheet-head { background: var(--deco-bar); } /* ④ 卡片：设置 / 装扮 / 钱包 / 商城 / 游戏 等，统一用 --card（主题已把它染成浅色） */ html[data-deco-theme] .set-group, html[data-deco-theme] .deco-card, html[data-deco-theme] .profile-card, html[data-deco-theme] .dlg, html[data-deco-theme] .sheet, html[data-deco-theme] .pn-item, html[data-deco-theme] .game-card, html[data-deco-theme] .bill-row, html[data-deco-theme] .cs-field, html[data-deco-theme] .jump-row { background: var(--card); } /* ⑤ 细节：置顶行 / 搜索框 / 按下态也别露出灰色块（它们原来写死 #F2F2F2 / #F7F7F7） */ html[data-deco-theme] .row.pinned, html[data-deco-theme] .search, html[data-deco-theme] .icon-btn:active, html[data-deco-theme] .row:active, html[data-deco-theme] .quick-item:active, html[data-deco-theme] .drawer-item:active, html[data-deco-theme] .set-row:active { background: var(--deco-bar); } /* ⑥ 对方的气泡：不管用什么主题，一律**白底**（连小尖角一起）。 为什么：qq-theme.css 里对方气泡用的是 var(--bsender-bg, var(--card))， 而主题把 --card 染成了粉 / 金 → 别人的消息看着跟自己的一个色系，很容易看岔。 例外：发送者用了 **VIP / SVIP 气泡装扮**（带 .bubble-c 类）→ 仍用装扮色（那本来就是付费效果）。 图片 / 红包 / 转账 / 通话卡片不参与（它们有自己的白底或深色样式）。 */ html[data-deco-theme] .msg:not(.me):not(.bubble-c) .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble):not(.call), html[data-deco-theme] .msg:not(.me):not(.bubble-c) .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble):not(.call)::after { background: #fff; } /* ============================================================ 个性装扮 · 聊天气泡 **一律纯色**（2026-10 按需求：金色渐变也改成纯色了）。 ⚠️ 气泡是 VIP / SVIP 装扮：免费档没有气泡（免费的「基础气泡 › 经典」 = bubble_id 0，等于不用装扮气泡 → 气泡颜色跟随主题 --qq-grad）。 ⚠️ 气泡上的「扫光（光线扫描）」「发光（彩色光晕）」以及「渐变流动动画」已全部删除， 以后不再有 —— 只剩一个纯色底 + 文字色。 ============================================================ */ /* ---- VIP：纯色红 ---- */ html[data-deco-bubble="b_red"] { --bubble-me-bg:#E8404F; --bubble-radius:14px 14px 4px 14px; --bubble-me-color:#FFFFFF; } /* ---- SVIP 三款：纯金 / 纯香槟 / 纯古铜（亮底用深色字）---- */ html[data-deco-bubble="b_gold"] { --bubble-me-bg:#FFC22E; --bubble-radius:16px; --bubble-me-color:#4A3200; } html[data-deco-bubble="b_champ"] { --bubble-me-bg:#E8A692; --bubble-radius:16px; --bubble-me-color:#5B2A22; } html[data-deco-bubble="b_bronze"] { --bubble-me-bg:#B07A18; --bubble-radius:16px; --bubble-me-color:#FFF3D0; } /* 纯色气泡（只作用于文字气泡；图片 / 红包 / 转账卡片不挂） ⚠️ 这里必须显式写 background，并且用 :not() 拉高优先级 —— 否则深色主题的 html[data-theme="dark"] .msg-bubble / .msg.me .msg-bubble 会把气泡底色写死（灰/蓝），气泡装扮的颜色就看不到了。 ⚠️ 没有 box-shadow（发光）、没有 animation（渐变流动）—— 纯色不需要动。 */ .msg.bubble-c .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble) { background: var(--bsender-bg, var(--card)); background-size: auto; animation: none; /* 亮金 / 香槟这类浅底要深色字，由 BUBBLE_STYLE 的 fg 传进来 */ color: var(--bsender-fg, #fff); } html[data-deco-bubble] .msg.me .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble) { background: var(--bubble-me-bg, #0A6BFF); background-size: auto; animation: none; } /* ============================================================ 对方发来的「自定义气泡」（样式随消息下发，字段见 m.bd） —— 发送方在自己那端用注入 CSS 画；接收方拿到 m.bd 后用下面这套 .bd-* 规则画同款， 所以双方看到的气泡一致。 变量：--bd-bg（底色/渐变）、--bd-fg（文字色）、--bd-sz（图案大小）、 --bd-tl/--bd-tr/--bd-bl/--bd-br（四角 PNG） ============================================================ */ .msg.bd-c.bd-c .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble){animation:none !important;} /* 底色（纯色 / 渐变）—— 用双写类名抬高优先级，避免被装扮气泡 / 主题规则抢走 */ .msg.bd-bg.bd-bg .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble){ background: var(--bd-bg, var(--card)) !important; color: var(--bd-fg, #fff) !important; border-color: transparent !important; animation: none !important; } /* 小尖角跟着底色（没开四角图案时才有意义） */ .msg.bd-bg.bd-bg .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble)::after{ background: var(--bd-bg, var(--card)) !important; border-color: transparent !important; } /* 四角图案：::after 外扩 11px，四张图贴在气泡外侧的四个角（没设的角是 none，不会画） */ .msg.bd-img.bd-img .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble)::after{ content:"" !important; position:absolute !important; inset:-11px !important; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background-color:transparent !important; transform:none !important; animation:none !important; opacity:1 !important; pointer-events:none; background-image: var(--bd-tl, none), var(--bd-tr, none), var(--bd-bl, none), var(--bd-br, none); background-position: left 3px top 3px, right 3px top 3px, left 3px bottom 3px, right 3px bottom 3px; background-size: var(--bd-sz, 22px) auto; background-repeat: no-repeat; } /* ============================================================ 个性装扮 · 聊天背景（第三期） bg_default = 素雅白（不挂 data-deco-bg，回落默认 #EDEFF2）。 ============================================================ */ html[data-deco-bg="bg_green"] { --chat-bg: linear-gradient(180deg,#E7F4EA,#F5FBF7); } html[data-deco-bg="bg_pink"] { --chat-bg: linear-gradient(180deg,#FEEBF1,#FFF7FA); } html[data-deco-bg="bg_ocean"] { --chat-bg: linear-gradient(180deg,#E4F4F8,#F6FBFD); } html[data-deco-bg="bg_gold"] { --chat-bg: linear-gradient(180deg,#FBF3E0,#FEFAF0); } /* ============================================================ 个性装扮 · 聊天内主题（第四期）：顶栏 + 输入栏 + 消息区整套配色 chat_default = 默认（不挂 data-deco-chat）。 ============================================================ */ html[data-deco-chat="chat_green"] { --chat-head-bg:#E7F4EA; --chat-input-bg:#E7F4EA; --chat-body-bg:linear-gradient(180deg,#EFF7F1,#F7FBF8); } html[data-deco-chat="chat_pink"] { --chat-head-bg:#FEEBF1; --chat-input-bg:#FEEBF1; --chat-body-bg:linear-gradient(180deg,#FFF0F5,#FFF8FA); } html[data-deco-chat="chat_blue"] { --chat-head-bg:#E8F0FE; --chat-input-bg:#E8F0FE; --chat-body-bg:linear-gradient(180deg,#EEF4FF,#F7FAFF); } html[data-deco-chat="chat_gold"] { --chat-head-bg:#FBF3E0; --chat-input-bg:#FBF3E0; --chat-body-bg:linear-gradient(180deg,#FCF6E8,#FEFAF0); } /* 气泡装扮：发送者的气泡是深色底，文字用白色（经典白 b_default 不带 .bubble-c，不受影响） */ .msg.bubble-c .msg-bubble{color:#fff;} /* ============================================================ 登录设备管理（设置 › 账号与安全）· 深色模式 样式定义在 css/style.css 的「登录设备管理」小节，这里只补深色下的配色。 ============================================================ */ html[data-theme="dark"] .dev-name{color:var(--text);} html[data-theme="dark"] .dev-ico{background:rgba(64,140,255,.16);color:#7FB4FF;} html[data-theme="dark"] .dev-btn{background:var(--card);color:var(--text);} html[data-theme="dark"] .dev-kick:active{background:rgba(250,81,81,.16);} /* ============================================================ 账号管理（多账号切换）· 深色模式 样式主体在 css/style.css 的「账号管理」小节，这里补深色配色。 ============================================================ */ html[data-theme="dark"] .acc-item:active{background:#242A31;} html[data-theme="dark"] .acc-del{color:var(--text-2);} html[data-theme="dark"] .acc-del:active{background:rgba(255,255,255,.08);color:var(--red);} /* ================= 音乐助手（深色主题） ================= 样式本体在 style.css 末尾，那边已经全部用变量； 这里只补两处**硬编码的浅色渐变**（封面方块），否则深色下会亮一块。 */ html[data-theme="dark"] .music-item-art{ background:linear-gradient(135deg,#233142,#1B2531); color:#6FB4FF; } html[data-theme="dark"] .music-item.playing .music-item-art{ background:linear-gradient(135deg,#1E5A8A,#2E86E0); color:#fff; } html[data-theme="dark"] .music-item:active{background:var(--press);} /* ============================================================ 聊天「性能模式」：.chat-body.perf（由 app.js 按消息条数自动开关，见 syncChatPerfMode） 装扮气泡的「渐变流动 bubbleFlow」动的是 background-position，不是 transform —— 上不了合成层，每帧都要把整条气泡重绘一遍；群聊里几十条同时跑 + 输入法动画必然掉帧。 ⚠️ 2026-10：气泡的「扫光 / 发光」已删除，这里只需要停「渐变流动」。 ① .chat-body.perf —— 消息数超过阈值（群聊 8 条 / 单聊 20 条）时停掉流动 ② .chat-body.scrolling —— 滚动期间暂停，停下 ~180ms 恢复（见 markChatScrolling） 停的只是动画，底色 / 渐变 / 圆角 / 图案全都保留，肉眼几乎看不出来。 ============================================================ */ .chat-body.perf.chat-body .msg.msg .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble){ animation: none !important; } .chat-body.scrolling.chat-body .msg.msg .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble){ animation-play-state: paused !important; } /* ---- 长会话虚拟化：.chat-body.cv（默认关闭，见 app.js 的 CHAT_CV_N）---- 屏外的消息完全不参与布局与绘制，几百条的群聊能省下大量布局时间。 contain-intrinsic-size 用 `auto 96px`：auto = 记住上次实测的尺寸， 96px 只是**从没渲染过**时的估算值（一条群聊消息含昵称/头像大约就是这个高度）。 ⚠️ 它会让 scrollHeight 变成估算值 —— 开启前请按 app.js 里的说明回归滚动相关逻辑。 */ .chat-body.cv .msg{ content-visibility: auto; contain-intrinsic-size: auto 96px; }