主题设置与字体颜色 — 全面分析及修复报告

一、需求与规则

1. Home 各版块及所有页（招采 /tender、生活 /life、资讯 /news 等）按「后台 → 设置 → 网站主题管理」的 PC 端主题生效。
2. Wap 端按同一后台的「移动端(WAP)」主题生效。
3. 字体与底色规则

- 有主题底色的区域：字体一律为白色。

- 无主题底色的链接/强调：字体为主题色（禁止灰 #333/#666/#999）。

---

二、现状分析

2.1 主题数据流

环节	说明
后台	backstage/template/index.html 提交 data[style][home] / data[style][wap]，保存到表 template_setting.setting（序列化）。
读取	Banyan/Common/theme-helper.php 中 getCurrentThemeSettings() / getThemeKey() / getThemeColor() / getThemeRootVars($module) 从 DB 读当前主题并输出 :root 变量。
应用	各版块 header 内联 `<style>:root { <?php echo getThemeRootVars('Home'	'Wap'); ?></style> + 唯一主题样式文件 theme.css`。

2.2 涉及入口与模板

入口	模块	模板 header	主题来源
/tender/index.html?nav_id=51	Home	public:header	getThemeRootVars('Home') + Home/statics/css/theme.css
/life/index?nav_id=48	Home	public:headerlife	同上
/news/index.html?nav_id=76	Home	public:header	同上
Wap 招采/生活/资讯等	Wap	public:header / headerlife / headernews	getThemeRootVars('Wap') + Wap/statics/css/theme.css

以上入口均已按后台模板设置使用同一套主题变量与 theme.css，无需再区分版块单独配置。

2.3 字体仍为灰色的原因

1. style.css 中大量写死灰字

- 如 color: #333、#666、#999、.graycl 等，且部分带 !important，覆盖了主题色。

- 例如：.selectList li a、.hotSearch a、.navA、.topTwo .menu 等。

1. “有底色”未统一强制白字

- 部分元素在 style.css 里只设置了 background: var(--theme-color)，没有同时设 color: #fff。

- 若后面再有 color: #333 等规则，就会显示为灰字。

1. 优先级与顺序

- 加载顺序为：style.css → :root 内联 → theme.css。

- theme.css 中必须对「有主题底色的块」显式写 color: #fff !important，对「无底色的链接/强调」写 color: var(--theme-color) !important，才能压过 style.css 的灰色。

---

三、已做修复

3.1 Home（PC）— themes/default/Home/statics/css/theme.css

• 有主题底色的元素统一白字

- 对导航、搜索按钮、tab 选中、按钮、楼层标题、分类标题等所有带 background(var(--theme-color)) 的区块，增加：

color: #fff !important;

- 包含但不限于：

.nav 内链接、.navListAll、.searchBox .submit、.subBtn、.topBackOn、.sy_FloorBt .sy_FloorBtz、.sy_flsx li h3、.cityInfor_list .nr h3、.qg-sp-tab span.on、.sy_coupon_tab a.on、.cloudBuy_cont_tab ul li.on、.liveBtn、.seat-check.on、.goods_flListA.on、.spxq_xqT li.on a、.comment_input p .pn、.login_btndz 等。

• 无底色处改为主题色（去灰）

- .navA：由 #333 改为 var(--theme-color)（顶栏「我的订单」等链接）。

- .selectList li a：下拉项默认为主题色；.selectList li a.cur / :hover 保持背景主题色 + 白字。

- .hotSearch a：热搜链接为主题色。

- .topTwo .menu a：右侧菜单链接为主题色。

- 保留：.searchBox input.text / .searchBox .text 为 #333、白底，保证输入框可读。

3.2 Wap — themes/default/Wap/statics/css/theme.css

• 无底色

- 链接、tab、分页链接等：color: var(--theme-color) / var(--theme-color-hover)。

• 有主题底色

- 导航、按钮、标题栏、当前 tab、当前分页、标签、表头、弹窗标题、搜索按钮等：

background 使用主题变量，并统一 color: #fff !important。

- 与 Home 规则一致：有底色即白字，无底色即主题色。

3.3 未改动的文件

• style.css

- 仅通过 theme.css 覆盖，不直接改 style.css，避免影响其他未用主题的页面。

• 各版块业务 CSS（如 life.css、news.css 等）

- 未改；若其中有灰字或硬编码色，后续可再在 theme.css 中按相同规则追加覆盖。

---

四、验证建议

1. 后台

- 切换 PC 端主题（如默认/商务蓝/活力红/自然绿等）保存后，刷新：

- http://localhost/tender/index.html?nav_id=51

- http://localhost/life/index?nav_id=48

- http://localhost/news/index.html?nav_id=76

- 检查：顶栏、导航、按钮、tab、楼层标题等是否为主题色底 + 白字；顶栏链接、热搜、下拉项等是否为主题色字、无灰色。

1. Wap

- 切换移动端主题后，访问对应 Wap 招采/生活/资讯页，同样检查：有底色处白字、无底色处主题色。

1. 对比

- 若某一块仍为灰字，可在开发者工具中查看该元素最终生效的 color 来自哪条规则；若来自 style.css，则在 theme.css 中为该类（或更具体选择器）增加一条 color: #fff 或 color: var(--theme-color) 并 !important 即可。

---

五、小结

项目	说明
主题来源	仅后台「网站主题管理」；Home 用 PC 端，Wap 用移动端。
应用方式	各版块统一：一段 :root 内联 + 一个 theme.css。
字体规则	有主题底色 → 白字；无底色 → 主题色；输入框保留黑字白底。
修改文件	Home：themes/default/Home/statics/css/theme.css；Wap：themes/default/Wap/statics/css/theme.css。

按上述规则，Home 与 Wap 各版块及版块内所有页都会随 backstage/template/index.html 的设置显示主题色，且满足「有底白字、无底主题字」的要求。