每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 3 个月前

在编辑器里改配色,页面上部分文字不跟着变

2 个回答 5,154 次浏览 主题与 Liquid 最后活跃 3 个月前
65

主题设置了 color scheme,编辑器里切换到浅色方案后,大部分区域变了,但某些卡片里的文字还是原来的颜色。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
3 个月前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
49

先把判断放在前面:这些元素用的是硬编码色值或自定义 CSS,没有引用 scheme 输出的 CSS 变量。

1处理顺序

  1. 确认主题是否使用 CSS 自定义属性输出配色,通常形如 --color-foreground。
  2. 把硬编码的颜色替换为 var(--color-foreground),或加上 color: inherit。
  3. 检查自定义 CSS 的优先级,内联样式和 !important 会覆盖 scheme 变量。
  4. 在 scheme 定义里补齐缺少的变量,部分主题只为部分关键字输出了变量。
  5. 切换每个 scheme 逐一验收,重点看按钮、卡片、输入框三类元素。
验收:切换 color scheme 后全站元素颜色一致变化,无残留旧色值。
风 风格技术团队 回答于 3 个月前
18

检查方法:开发者工具里选中元素,看 computed 的 color 是否来自 var(--...),如果显示的是十六进制值,基本就是硬编码。

泽 阿泽 · 前端工程师 · 3 个月前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu