[开发]配色重构分析总结 — 内联颜色收 CSS + modern.css 变量化

👑Lv.11 元老 🌞 骨干会员
2026-10-26 01:48:32

本文由 FlintHub 开发文档归档发布。原始文档日期见标题前缀,来源:暂存20260913/docs/配色重构分析_20260817 (2).md。

配色重构分析总结 — 内联颜色收 CSS + modern.css 变量化

日期:2026-08-17

范围:仅前台(后台 admin.css 独立色板,用户确认后台不管)

目标:① 视图内联颜色收进 CSS(改配色方便)② modern.css 硬编码全变量化 ③ modern 做主干,其他主题(暗夜/azure 等)纯覆盖规则

状态:分析完成,待下个会话执行(本会话仅分析,未动手)


一、结论摘要

  • ✅ 可行:modern.css 硬编码变量化(约 51 处)+ 静态内联收 CSS,纯样式层改造,不动 PHP 逻辑、不动数据库
  • ⛔ 不能动:7 处动态数据色(用户自定义帖子颜色、等级颜色)——它们是每条数据自己的值,无法收进 CSS 静态规则,且不应被主题覆盖
  • 推荐方案:CSS 变量间接引用——动态色在视图里改为 style="--thread-color:<?= $titleColor ?>;",CSS 用 var(--thread-color, ...) 消费;但用户已明确帖子颜色不动,故 7 处动态色保持原样,仅处理静态项

二、现状盘点

2.1 视图内联颜色(8 个视图,共 11 处)

视图行内容类型处理结论
forum/index.php ×2style="color:<?= $titleColor ?>;"动态(用户帖子色)⛔ 不动
forum/category.php ×1style="color:<?= $titleColor ?>;"动态⛔ 不动
home/index.php ×1style="color:<?= $titleColor ?>;"动态⛔ 不动
tags/show.php ×1style="color:<?= $titleColor ?>;"动态⛔ 不动
tags/show.php ×1style="background:<?= getLevelColor($level) ?>;"动态(等级色)⛔ 不动(数据色)
thread/show.php ×1style="color:<?= $thread['color'] ?: 'var(--mn-text)' ?>;"动态(帖子色)⛔ 不动
_components/right_sidebar.php ×1style="background:<?= $authorCfg['color'] ?? '#999' ?>;"动态(等级色)⛔ 不动(数据色)
_components/right_sidebar.php ×2style="color:inherit;text-decoration:none;"静态✅ 收 CSS(建 .mn-link-inherit 类)
errors/404.php ×1style="color:var(--mn-text-muted);"静态(已是变量)✅ 收 CSS
admin/threads.php ×1style="color:<?= $t['color'] ?: 'var(--text-dark)' ?>;"动态(帖子色)⛔ 不动(后台,且用户确认后台不管)

小结:可动 3 处静态(right_sidebar 2 + 404 1),其余 8 处动态数据色全部保留原样。

2.2 modern.css 硬编码颜色(需变量化)

  • 十六进制颜色:67 处(去重后 39 个不同值)
  • rgba/rgb:12 处
  • 主要分布:徽章背景(#fef3c7/#f0fdf4/#fef2f2 等)、文字色(#fff/#333/#16a34a/#dc2626 等)、边框、阴影、--mn-* 回退值、代码块(#1e1e2e/#cdd6f4)

2.3 主题文件现状

  • assets/css/themes/modern-night.css:仅 51 行,1 个 :root 变量块(当前只是"深色导航 + 浅色正文",非纯暗色)
  • modern-azure/crimson/jade/purple.css:同构,均为 :root 变量覆盖
  • 加载机制:main.php 在 modern.css 之后追加加载 themes/{theme}.css,后加载覆盖变量天然生效(无需 !important)

三、改造方案(下个会话执行)

阶段 A:modern.css 硬编码 → :root 变量(主干,1 个文件)

  1. 在 modern.css 的 :root 新增约 25~30 个语义变量(命名随现状功能,如 --mn-badge-hot-bg、--mn-alert-warn-bg、--mn-code-bg、--mn-code-text、--mn-text-white 等)
  2. 硬编码处替换为 var(--mn-*, 原色) 回退形式(浅色主题零变化)
  3. 变量命名参照现有 --mn-* 前缀规范(语义化点分无,用连字符)

阶段 B:静态内联收 CSS(3 处,2 个视图)

  1. _components/right_sidebar.php:2 处 color:inherit;text-decoration:none → 建 .mn-link-inherit { color: inherit; text-decoration: none; },视图去掉内联
  2. errors/404.php:style="color:var(--mn-text-muted);" → 建 .mn-text-muted-inline(或复用现有 .c-999/.mn-text-muted 类)替换

阶段 C:暗夜星辰 → 纯暗色(1 个文件)

  1. modern-night.css 的 :root 全量覆盖为暗色值:
  • --mn-bg/--mn-bg-body/--mn-bg-card/--mn-bg-sidebar/--mn-bg-input/--mn-bg-row-hover → 深色系(如 #0f172a/#111827 等)
  • --mn-text/--mn-text-secondary/--mn-text-muted → 浅色系
  • --mn-border* → 深色边框
  • --mn-shadow* → 更重阴影
  1. 阶段 A 新增变量在暗夜中同样覆盖
  2. 残留硬编码色(若阶段 A 有遗漏)在 night 文件内追加覆盖规则(极少数才用 !important 兜底)

阶段 D:验证

  • 浅色主题(modern/azure 等)逐页回归:改前改后无视觉差异
  • 暗夜主题:PC/移动双宽度检查 首页/论坛/帖子/博客/搜索/后台入口 等
  • php -l 无关(纯 CSS + 少量视图 HTML)

四、风险与注意

  • 风险低:回退值 = 原色,浅色主题零回归;暗夜改动只在 night 文件内
  • 动态数据色(帖子颜色/等级颜色)严禁收进 CSS 静态规则——那是每条记录自己的值,且用户明确不能动
  • admin/threads.php 属后台,不在本次范围
  • 视图内联改动极小(每处 1 行),不涉及 PHP 逻辑

五、待确认项

  • [ ] 暗夜配色具体色板(深色系选值)由下个会话按 #1e293b 系(与导航同族)定调,或按用户偏好调整
  • [ ] 新增变量命名清单(约 25~30 个)执行时按功能逐处生成
轻量级、高性能、零 MySQL 依赖的PHP社区系统。
| 瀏覽 3 次 | 回覆 0 次

全部回覆 (0)

暫無回覆

請 登入