laoyang/FeedLite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

软件主题色：调色板扩到 12 色 + 后台可任意取色的完整色板 #7

New Issue
Closed
opened 2026-11-04 13:16:43 +00:00 by laoyang · 1 comment
laoyang commented 2026-11-04 13:16:43 +00:00
Owner
Copy Link
Copy Source

背景

用户 2026-11-04：

不同的软件要有不同的颜色。现在颜色有点少，已经快不够分了，至少应该有 10 个左右。
还是不对呀，需要一个完整的色板，右侧那些默认颜色就不要了。
下拉框的颜色就用那个软件的主题颜色，不行吗？

调研发现的根因（比"数量不够"严重）

调色板有两份独立硬编码：

  • lib/util.php 的 fb_color_default_for()
  • lib/admin_taxonomy.php 的 $presets

两边色值还不一样，早就不同步了。用户在后台只能从 8 个里选，
而实际分配用的是另一批色值。

改法

1. 统一出口

新增 fb_color_palette() 作为唯一来源，两侧都调用它，12 色。

2. 12 色按色相环切分

色相：2/32/62/92/122/152/178/200/232/266/293/330

  • 最小相邻间距 22°（其余多在 27~37°）
  • 白底对比度全部 4.76 ~ 6.19（WCAG AA 需 ≥4.5），视觉重量统一
  • 黄/黄绿饱和度压到 50%（再高就荧光）
  • 避开纯红纯绿（会与「待处理/已解决」状态色撞）

3. 后台改为自绘取色面板

原生 <input type="color"> 只有个小方块，用户不知道能点。
改成点击弹出色板：342×200 色相/饱和度画布 + 色相条 + 明度条 + 十六进制输入。
右侧预设圆点删除（能任意取色，再摆一排样例是重复）。

4. 下拉框跟随软件主题色

--brand-tint-1/2/3 三档浅色（PHP 用 fb_color_tint() 算好再输出）。

踩过的坑

  1. 第一版往原 8 色后面追加 6 个，实测 8 对颜色几乎同色 ——
    原调色板里 185°/212°/217° 三个蓝本就挤在一起，
    "塞缝隙"思路是错的，必须重排整个色相环。
  2. 色板被 overflow:hidden 裁掉一半 ——
    表单在 <details class="tax-form-box"> 里，absolute 定位会被裁，
    连带色相条看不见，用户以为"只有蓝色"。改 position:fixed 解决。
  3. color-mix(in srgb, var(--brand) 9%, #fff) 算出来是透明 ——
    CSS.supports() 返回 true、规则也匹配上了，但计算值是 oklab(0 0 0 / 0)。
    改成 PHP 算好输出 CSS 变量。
  4. 用 JS 加 is-active 类测不出 :hover ——
    必须发真实 mouseMoved 事件才能验证。

验收

  • 12 色无重复、对比度全 ≥4.5、最小色相间距 22°
  • 后台预设与调色板同源（旧硬编码数组已消失）
  • 色板四边 elementFromPoint 均命中自己 → 未被裁切
  • 拖动色相条，6 个色相取样互不相同（红/黄/绿/青/蓝/品红）
  • 四个软件下选中项底色分别为各自主题色系，且互不相同

为什么单独建单

与 #6 是两回事：#6 只动列表/详情的 DOM 顺序；本单是主题色系统（调色板统一 + 自绘色板 + 下拉跟随主题色），涉及 util.php/admin_taxonomy.php/style.css，可独立验收

## 背景 用户 2026-11-04： > 不同的软件要有不同的颜色。现在颜色有点少，已经快不够分了，至少应该有 10 个左右。 > 还是不对呀，需要一个完整的色板，右侧那些默认颜色就不要了。 > 下拉框的颜色就用那个软件的主题颜色，不行吗？ ## 调研发现的根因（比"数量不够"严重） 调色板有**两份独立硬编码**： - `lib/util.php` 的 `fb_color_default_for()` - `lib/admin_taxonomy.php` 的 `$presets` 两边色值还不一样，早就不同步了。用户在后台只能从 8 个里选， 而实际分配用的是另一批色值。 ## 改法 ### 1. 统一出口 新增 `fb_color_palette()` 作为唯一来源，两侧都调用它，12 色。 ### 2. 12 色按色相环切分 色相：2/32/62/92/122/152/178/200/232/266/293/330 - 最小相邻间距 **22°**（其余多在 27~37°） - 白底对比度全部 **4.76 ~ 6.19**（WCAG AA 需 ≥4.5），视觉重量统一 - 黄/黄绿饱和度压到 50%（再高就荧光） - 避开纯红纯绿（会与「待处理/已解决」状态色撞） ### 3. 后台改为自绘取色面板 原生 `<input type="color">` 只有个小方块，用户不知道能点。 改成点击弹出色板：342×200 色相/饱和度画布 + 色相条 + 明度条 + 十六进制输入。 右侧预设圆点删除（能任意取色，再摆一排样例是重复）。 ### 4. 下拉框跟随软件主题色 `--brand-tint-1/2/3` 三档浅色（PHP 用 `fb_color_tint()` 算好再输出）。 ## 踩过的坑 1. **第一版往原 8 色后面追加 6 个，实测 8 对颜色几乎同色** —— 原调色板里 185°/212°/217° 三个蓝本就挤在一起， "塞缝隙"思路是错的，必须重排整个色相环。 2. **色板被 `overflow:hidden` 裁掉一半** —— 表单在 `<details class="tax-form-box">` 里，absolute 定位会被裁， 连带色相条看不见，用户以为"只有蓝色"。改 `position:fixed` 解决。 3. **`color-mix(in srgb, var(--brand) 9%, #fff)` 算出来是透明** —— `CSS.supports()` 返回 true、规则也匹配上了，但计算值是 `oklab(0 0 0 / 0)`。 改成 PHP 算好输出 CSS 变量。 4. **用 JS 加 `is-active` 类测不出 `:hover`** —— 必须发真实 `mouseMoved` 事件才能验证。 ## 验收 - 12 色无重复、对比度全 ≥4.5、最小色相间距 22° - 后台预设与调色板同源（旧硬编码数组已消失） - 色板四边 `elementFromPoint` 均命中自己 → 未被裁切 - 拖动色相条，6 个色相取样互不相同（红/黄/绿/青/蓝/品红） - 四个软件下选中项底色分别为各自主题色系，且互不相同 --- ### 为什么单独建单 与 #6 是两回事：#6 只动列表/详情的 DOM 顺序；本单是主题色系统（调色板统一 + 自绘色板 + 下拉跟随主题色），涉及 util.php/admin_taxonomy.php/style.css，可独立验收
laoyang commented 2026-11-04 13:17:28 +00:00
Author
Owner
Copy Link
Copy Source

追溯关联（补记）

本单是事后补建的工单 —— 改动在 2026-11-04 已全部上线，当时未按铁律先建单，此处补录。

对应提交

  • a00e222 调色板从 8 色扩到 12 色（按色相环重排）；后台预设改为共用同一份
  • ad1b0ee 主题色改为自绘取色面板（任意取色）；图标上传加即时预览与状态提示
  • 338a35c 主题色改为完整色板：画布 342x200，加明度条，删除右侧预设圆点
  • a2a3306 修色板被裁切 + 让人看得出能选全色域
  • 8db38a8 下拉框改回软件主题色；修 color-mix 与变量配合失效的问题

实际验证结果

调色板

12 色无重复；白底对比度 4.76 ~ 6.19（全 ≥4.5）；
最小相邻色相间距 22°（178°→200°），其余 26~37°。

后台取色面板

  • 面板 372×357、画布 342×200，完整在视口内
  • 四边 elementFromPoint 均命中自己 → 未被 overflow:hidden 裁切
  • Canvas 四角像素分别为灰白/蓝/黑 → 渐变确实画出
  • 拖动色相条 0/60/120/180/240/300°，取样色板底色分别为
    红/黄/绿/青/蓝/品红，互不相同 → 覆盖全色域
  • 光标中心 (238,54) 落在画布区域 (11..237, 11..161) 内

下拉跟随主题色

软件 主题色 选中项底色
轻反馈 #0057b8 rgb(184,208,235) 浅蓝
同步日历 #ff3f44 rgb(255,201,203) 浅红
密码生成器 #a556f7 rgb(230,208,253) 浅紫
简航 #3571fb rgb(198,215,254) 亮蓝

真实 mouseMoved 触发 hover：背景 rgb(255,238,238)，:hover 匹配 true，
选中项明显深于 hover。

现有软件颜色

未改动（#0057b8 / #b4553c / #6a4c93 / #0e7c86 / #3a5a8c 保持原值）。

遗留 / 待观察

  1. 用户后续自行在后台把部分软件改成了高饱和色（#ff3f44 / #a556f7 / #3571fb），
    属正常使用，非缺陷。
  2. color-mix() 配 CSS 变量在本环境解析成透明，已改用 PHP 预算值的方案；
    若将来浏览器行为修复，可考虑简化回 color-mix，非必要。
## 追溯关联（补记） 本单是**事后补建**的工单 —— 改动在 2026-11-04 已全部上线，当时未按铁律先建单，此处补录。 ## 对应提交 - `a00e222` 调色板从 8 色扩到 12 色（按色相环重排）；后台预设改为共用同一份 - `ad1b0ee` 主题色改为自绘取色面板（任意取色）；图标上传加即时预览与状态提示 - `338a35c` 主题色改为完整色板：画布 342x200，加明度条，删除右侧预设圆点 - `a2a3306` 修色板被裁切 + 让人看得出能选全色域 - `8db38a8` 下拉框改回软件主题色；修 color-mix 与变量配合失效的问题 ## 实际验证结果 ### 调色板 12 色无重复；白底对比度 4.76 ~ 6.19（全 ≥4.5）； 最小相邻色相间距 22°（178°→200°），其余 26~37°。 ### 后台取色面板 - 面板 372×357、画布 342×200，完整在视口内 - 四边 `elementFromPoint` 均命中自己 → 未被 `overflow:hidden` 裁切 - Canvas 四角像素分别为灰白/蓝/黑 → 渐变确实画出 - 拖动色相条 0/60/120/180/240/300°，取样色板底色分别为 红/黄/绿/青/蓝/品红，互不相同 → 覆盖全色域 - 光标中心 (238,54) 落在画布区域 (11..237, 11..161) 内 ### 下拉跟随主题色 | 软件 | 主题色 | 选中项底色 | |---|---|---| | 轻反馈 | #0057b8 | rgb(184,208,235) 浅蓝 | | 同步日历 | #ff3f44 | rgb(255,201,203) 浅红 | | 密码生成器 | #a556f7 | rgb(230,208,253) 浅紫 | | 简航 | #3571fb | rgb(198,215,254) 亮蓝 | 真实 `mouseMoved` 触发 hover：背景 rgb(255,238,238)，`:hover` 匹配 true， 选中项明显深于 hover。 ### 现有软件颜色 未改动（#0057b8 / #b4553c / #6a4c93 / #0e7c86 / #3a5a8c 保持原值）。 ## 遗留 / 待观察 1. 用户后续自行在后台把部分软件改成了高饱和色（#ff3f44 / #a556f7 / #3571fb）， 属正常使用，非缺陷。 2. `color-mix()` 配 CSS 变量在本环境解析成透明，已改用 PHP 预算值的方案； 若将来浏览器行为修复，可考虑简化回 `color-mix`，非必要。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
laoyang (老杨)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: laoyang/FeedLite#7