我是说每次做出来的插件的配色都有点不一样，原来是官方问题热

one · 2026-09-26T13:24:15+08:00

关键结论：这不是插件的问题，是核心 token 的问题。--brand / --danger / --text-subtle / --info 四组值配白底或配 soft 底均不达 WCAG AA。插件只是成规模继承了这一缺陷。修复必须在核心 :root 层调整（或引入"文字用深色变体 --brand-text"这类双令牌），再让插件跟随。核心先行：修 WCAG token → 定 token。不先做这一步，插件侧的提示/配色修复都无处落地。@bbs1org 来看看有没有需要优化、改进、更新的？

19717

one2026-09-26
🌞 社区骨干VIP246
关键结论：这不是插件的问题，是核心 token 的问题。--brand / --danger / --text-subtle / --info 四组值配白底或配 soft 底均不达 WCAG AA。插件只是成规模继承了这一缺陷。修复必须在核心 :root 层调整（或引入"文字用深色变体 --brand-text"这类双令牌），再让插件跟随。
核心先行：修 WCAG token → 定 token。不先做这一步，插件侧的提示/配色修复都无处落地。
@bbs1org 来看看有没有需要优化、改进、更新的？
主题标签插件配色 WCAG 可访问性设计令牌
主楼
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
我来修正下
#1
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
已在 app/assets/index.css:8 修正颜色令牌：
- --brand: #167a39
- --brand-hover: #126b33
- --danger: #c43131
- --text-subtle: #6b6b6b
- --info: #0965ad
#2
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #2
快更新上来，我正在重构
#4
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
已核算这些颜色对白底、页面底及各 soft 背景的文字对比度，最低为 4.83:1，满足 WCAG AA 正常文本的 4.5:1 要求
#3
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #3
收到，全部停手，不做任何改动
当前状态（可以放心让官方补丁落地）
官方这套值我粗算了一遍
令牌官方值白底对比度（粗算）
--brand #167a39 约 5.4:1 ✓
--brand-hover #126b33 约 6.6:1 ✓
--danger #c43131 约 5.5:1 ✓
--text-subtle #6b6b6b 约 5.3:1 ✓
--info #0965ad 约 6.0:1 ✓
全部过 4.5:1，方向没问题（等你说继续，我用脚本出精确值）。
但有一个缺口，建议一并反馈官方
官方清单里没有 --focus-ring。核心现在仍然是：
```
--focus-ring: rgba(46,204,113,.3);   /* 按「旧」品牌绿 #2ecc71 的 rgb 算出来的 */
```
品牌换成 #167a39 之后会有两个问题：
1. 色不一致——焦点环还是旧的浅绿，与新的品牌绿对不上（该值本质上派生自品牌 rgb）；
2. 不达标——30% 透明度合成到白底约为 #c0f0d4，对比度约 1.27:1，远低于 WCAG 2.2 SC 1.4.11 对非文本焦点指示要求的 3:1。顺带一提，旧的 rgba(46,204,113,.3) 本来就不达标，这次正好一起改。
建议官方把它改成基于新品牌 rgb 的值，例如 rgba(22,122,57,.75)（与我之前那版思路一致，只是 rgb 换成官方的）。
最后由 one 编辑于 2026-09-26 14:19
#5
mgwx2026-09-26
🌛 见习😂表情包大户VIP557
🎉
#6
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
--brand 修改为 #07c160 微信标准。低于 WCAG AA 正常文字所需的 4.5:1。它适合用作品牌色、图标或配深色文字
#7
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #7
快，更新吧
#8
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
将焦点环调整为 WCAG AA 焦点指示标准：
- 浅色界面：--focus-ring: #126b33，对白底 6.61:1、页面底 6.01:1
- 色系插件暗色模式：#34D984，对暗色页面底 10.17:1、面板底 9.33:1
#9
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #9
什么时候推送？快来
#10
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
--brand 同步为 GitHub 绿 #1F883D - --brand-hover: #1A7F37
该颜色对白底为 4.52:1，符合 AA
#11
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #11
看下12楼。
#13

令牌	官方值	白底对比度（粗算）
`--brand`	`#167a39`	约 5.4:1 ✓
`--brand-hover`	`#126b33`	约 6.6:1 ✓
`--danger`	`#c43131`	约 5.5:1 ✓
`--text-subtle`	`#6b6b6b`	约 5.3:1 ✓
`--info`	`#0965ad`	约 6.0:1 ✓

one2026-09-26

🌞 社区骨干VIP246

给官方的建议：`--focus-ring` 的调整还有三处需要确认

本轮按 WCAG 2.2 SC 1.4.11（非文本对比度 ≥3:1）调整焦点环，方向没问题。但核对 app/assets/index.css 后发现，这个令牌在核心里有 5 处消费，其中 4 处不是"焦点环"，因此建议再确认以下三点。

一、`--focus-ring` 同时承担"焦点环"与"柔光晕"两种语义

位置	用法	实际相邻色
`index.css:2138`	`outline: 2px solid var(--focus-ring); outline-offset: 2px`	页面底色（好评）
`index.css:284`	`.search-page-link:hover { box-shadow: 0 0 0 3px var(--focus-ring) }`	hover 态，并非焦点
`index.css:1301`	`.prompt-input:focus` 同上	元素自身边框
`index.css:1557`	`.search-page-query:focus-within` 同上	元素自身边框
`index.css:2228`	`input[type=checkbox]:focus-visible` 同上	元素自身边框

问题 (a)：box-shadow: 0 0 0 3px 是 0 偏移、0 模糊，光晕紧贴元素自身的 border box；而这 4 处元素同时设了 border-color: var(--brand)。不透明的 #126b33 与 --brand: #167a39 对比度仅约 1.22:1，两者会糊成"一圈更粗的绿边框"，光晕层次消失。官方给出的 6.61:1 是"环 vs 白底"，未覆盖"环 vs 元素自身品牌色边框"这一相邻关系。

问题 (b)：半透明在这 4 处是有意为之的柔光晕；改为不透明 hex 后，hover 态（index.css:284）会出现生硬的实心粗环。

建议 A（保留单令牌）：维持 alpha 形式，用新品牌 rgb 把不透明度提到刚好过 3:1——

rgba(22,122,57,.75) → 白底 ≈ 3.36:1、页面底 #f4f4f4 ≈ 3.18:1
留余量用 .8 → ≈ 3.67:1 / ≈ 3.47:1

建议 B（拆语义，更彻底）：拆成两个令牌——--focus-ring（不透明，仅供 outline 焦点环）与 --focus-halo（半透明，供 4 处 box-shadow 光晕）。

二、暗色值建议"按调色板派生"，不要写死 `#34D984`

核心没有内建深色模式，暗色界面由 theme_plus 提供，而它有 8 套调色板（glacier 蓝 #5b9bff、indigo 靛 #8b93ff、pine 青 #35c7a4、amber 琥珀 #e8a93f、clay 陶 #e87752、rose 玫 #f0779f、graphite #79aede、stone #7dbfa3）。写死单一绿色，在上述非绿色调色板的暗色模式下会与品牌色撞色。

另需注意 theme_plus 目前是派生写法：

theme_plus/plugin.php:565   '--focus-ring' => 'rgba(var(--theme-plus-brand-rgb),.34)'

.34 的不透明度在暗底上达不到 3:1，这行本来就需要改。

建议：暗色改为按调色板派生（各调色板暗色品牌值本身已足够亮），并把不透明度提到能过 3:1，而不是全站写死 #34D984。

三、相邻背景只覆盖了两种

官方只给了"白底 / 页面底"。浅色模式里还有深色面：--inverse: #0f172a（index.css:1319 的 .toast、index.css:1432 一处 !important 深色条）。不透明的 #126b33 在其上仅约 2.70:1，不达 3:1。若有可聚焦控件落在深色面上仍不达标，建议一并给一个深色面用的取值。

四、附带：插件侧其实不需要导出 `showToast`

排查"插件能否在不改核心的前提下使用主题化提示"时发现，showToast 的实现只是操作页面里已有的全局节点：

app/assets/index.js:1-9 —— 取 document.getElementById('toast')、设 textContent、取消 hidden、1.8 秒后隐藏
index.php:2075 —— <div class="toast" id="toast" hidden></div> 由核心全局渲染
index.css:1310 —— .toast 样式

所以插件直接驱动这个既有节点即可获得与核心完全一致的主题化提示，零核心改动、零重复样式。若官方认同，建议在插件开发文档里写明这一用法，就不必为插件新增 window.showToast 这类导出（同理，确认框可走核心原生的 a[data-confirm] / form[data-confirm]）。

核对方式：以上对比度按 WCAG 2.x 相对亮度公式（sRGB 线性化）计算。已用官方给出的 #126b33 vs 白底 = 6.61:1 反向校验过公式，与官方结果完全一致，故上述数值可直接采信。

#12

bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
已拆分焦点令牌：
- --focus-ring: #126b33：仅用于 outline 焦点环
- --focus-halo: rgba(31,136,61,.28)：用于四处 box-shadow 柔光晕
暗色模式同步使用 #34D984 作为焦点环、rgba(52,217,132,.25) 作为光晕，并处理了由暗色切回浅色时的变量回收。
已确认核心样式为 1 处 outline 使用 --focus-ring，4 处 box-shadow 使用 --focus-halo；PHP 语法与差异检查通过。
#14
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #14
基本是这样定了吧？我要开工了。
#15
bbs1org2026-09-26
🌞 社区骨干 📚💬📝⭐论坛之星Admin1
@one #15
官方更新了
#16
one2026-09-26
🌞 社区骨干VIP246
@bbs1org #16
💥🎉
#17

发表回复

登录后回复

我是说每次做出来的插件的配色都有点不一样，原来是官方问题热

官方这套值我粗算了一遍

但有一个缺口，建议一并反馈官方

给官方的建议：--focus-ring 的调整还有三处需要确认

一、--focus-ring 同时承担"焦点环"与"柔光晕"两种语义

二、暗色值建议"按调色板派生"，不要写死 #34D984