调色板从 8 色扩到 12 色(按色相环重排);后台预设改为共用同一份
用户:「不同的软件要有不同的颜色,现在颜色有点少,快不够分了,
至少应该有 10 个左右的颜色。」
调研发现的问题比「数量少」更严重:
🔴 调色板有两份独立硬编码 —— util.php 一份、admin_taxonomy.php 又一份,
两边的色值还不一样,早就不同步了。用户在后台只能从 8 个里选,
而实际分配用的却是另一批色值。
改法:
- 新增 fb_color_palette() 作为唯一出口,12 色
- fb_color_default_for() 改为调用它
- 后台 也改为调用它 —— 从此只有一处需要维护
12 色设计(360° 切 12 段,逐色验证,不是随手挑的):
色相:2/32/62/92/122/152/178/200/232/266/293/330,**最小相邻间距 22°**
对比度:白底全部落在 4.76~6.19,既都够看清(WCAG AA 需 ≥4.5),
又不会某个颜色特别深显得突兀
压制项:黄/黄绿饱和 50%(再高就荧光)、蓝/靛蓝压到 62%/50%
避开项:纯红纯绿会与「待处理/已解决」状态色撞,所以红取 2°、绿取 122°
中途踩过的坑(记录下来避免重犯):
第一版直接往原 8 色后面追加 6 个,实测发现 8 对颜色几乎同色 ——
因为原调色板里 185°/212°/217° 三个蓝本就挤在一起。
「塞进缝隙」这个思路是错的,必须重排整个色相环。
现有 5 个软件颜色**未改动**(实测仍是 #0057b8/#b4553c/#6a4c93/#0e7c86/#3a5a8c):
它们的色相分布本就合理(2°12°185°212°265°),没必要让已发布链接的配色突变。
新调色板只影响「新添加且未指定颜色」的软件。
验证:12 色无重复、对比度全 ≥4.5、最小色相间距 22°、
后台已改为调用 fb_color_palette() 且旧硬编码数组已消失、6 个路由 200。
This commit is contained in:
@@ -538,7 +538,11 @@ function fb_admin_taxonomy_page($pdo, $editSw, $editCat) {
|
||||
// 主题色:前台按软件换色,用短链接进不同软件一眼就能区分
|
||||
$curColor = $esw ? fb_color_norm((string)$esw['color']) : '';
|
||||
$sugColor = $curColor !== '' ? $curColor : fb_color_default_for($esw ? (int)$esw['id'] : 0);
|
||||
$presets = ['#0057B8', '#2E7D5B', '#B4553C', '#6A4C93', '#0E7C86', '#A02C5A', '#8A6D1F', '#3A5A8C'];
|
||||
/* 🔴 必须用 fb_color_palette(),不要再在这里写死一份数组。
|
||||
* 以前这里硬编码了另外 8 个色值,和 util.php 的调色板完全不同步 ——
|
||||
* 结果后台只能选那 8 个,用户在后台挑不到新颜色,
|
||||
* 而他从没配置过的软件却会被分到「调色板里另一批」颜色。 */
|
||||
$presets = fb_color_palette();
|
||||
echo ' <div class="field"><span>主题色<i class="hint">前台进这个软件时整体配色跟着变,用来区分不同软件</i></span>';
|
||||
echo ' <div class="color-row">';
|
||||
echo ' <input type="color" name="color" value="' . e($sugColor) . '" class="color-input">';
|
||||
|
||||
+34
-2
@@ -255,10 +255,42 @@ function fb_color_variants($hex) {
|
||||
|
||||
/**
|
||||
* 给某个软件挑一个默认主题色(未配置时用)。
|
||||
* 按软件的排序位次从调色板里取,保证同一站点里不同软件颜色不撞。
|
||||
* 按软件的 id 从调色板里取,保证同一站点里不同软件颜色不撞。
|
||||
*
|
||||
* 🔴 2026-11-04 按色相环**整体重排**为 12 色(用户:颜色快不够分了)。
|
||||
*
|
||||
* 选色规则,改之前先读:
|
||||
* ① **色相均匀分布**:360° 切成 12 段,相邻至少差 22°(实测最小 22°)。
|
||||
* 旧调色板有 3 个蓝挤在 185°/212°/217°,并排看几乎同色 —— 这是重排的原因;
|
||||
* ② **对比度落在 4.76~6.19 的窄带**:白底上文字都够看清(WCAG AA 要 ≥4.5),
|
||||
* 又不会某个颜色特别深、显得比其他刺眼;
|
||||
* ③ **避开纯红/纯绿**:会与「待处理/已解决」状态色打架,所以红取 2°、绿取 122°;
|
||||
* ④ 黄/黄绿饱和度压到 50%(再高就荧光),蓝/靛蓝也压到 62%/50%。
|
||||
*
|
||||
* ⚠️ 这个数组和 lib/admin_taxonomy.php 里的 $presets **必须保持一致**。
|
||||
* 以前是两份独立硬编码,早就不同步了 —— 后台只给 8 个可选色,
|
||||
* 实际调色板却是另一批,用户在后台根本选不到新增颜色。
|
||||
* 改这里记得同步改那边(见 fb_color_palette() 统一出口)。
|
||||
*/
|
||||
function fb_color_palette() {
|
||||
return [
|
||||
'#B53530', // 1 红 2°
|
||||
'#9D6525', // 2 橙 32°
|
||||
'#747728', // 3 黄 62°
|
||||
'#517E2A', // 4 黄绿 92°
|
||||
'#2B822E', // 5 绿 122°
|
||||
'#2D8059', // 6 青绿 152°
|
||||
'#267E7B', // 7 青 178°
|
||||
'#2678A1', // 8 天蓝 200°
|
||||
'#4154D2', // 9 蓝 232°
|
||||
'#7A44C1', // 10 靛蓝 266°
|
||||
'#943BA0', // 11 紫 293°
|
||||
'#AD3470', // 12 玫红 330°
|
||||
];
|
||||
}
|
||||
|
||||
function fb_color_default_for($softwareId) {
|
||||
$palette = ['#0057B8', '#2E7D5B', '#B4553C', '#6A4C93', '#0E7C86', '#A02C5A', '#8A6D1F', '#3A5A8C'];
|
||||
$palette = fb_color_palette();
|
||||
$id = max(0, (int)$softwareId);
|
||||
return $palette[$id % count($palette)];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user