跳到主要内容

配色系统

颜色是商家表达品牌最有力的工具之一。一套设计良好的配色系统能让商家在主题设置里给整个店面换装——改一个颜色，所有 section 一起变。本文介绍如何用 color 设置和 CSS 变量搭建这套系统。

按角色定义颜色设置​

在 config/settings_schema.json 里添加 color 设置，按角色（颜色的用途）定义，而不是按元素逐个定义：

{
  "type": "color",
  "id": "color_body_text",
  "label": {
    "en-US": "Body text",
    "zh-CN": "正文文字"
  },
  "default": "#292929"
}

数量保持精简。背景、正文、标题、按钮、边框这几个角色能覆盖主题的大部分场景；多个元素共用一个角色时，商家用几个取色器就能给全店换装，不用在几十个设置里翻找。只在商家确实需要独立控制的地方加元素级颜色（例如公告栏），并在设置侧边栏里用清晰的分组标题组织。

ID 命名要有规律——统一用 color_ 这样的前缀，在 Liquid 里好找，还能用循环批量处理（见下文）。

归一化颜色值​

取色器会以两种格式存储值，Liquid 按存储原样输出：商家选了不透明的颜色时存 #FFFFFF，动过透明度输入时存 rgba(41, 41, 41, 1)。两种都是合法的 CSS——如果只是把值直接打进样式表，可以原样使用。

当你的 CSS 逻辑假设某一种格式时（例如要基于基础色派生变体），才需要归一化。color_to_hex 过滤器可以把任意 CSS 颜色字符串转成 hex6：

{% assign color_body_text = settings.color_body_text | default: '#292929' %}
{% unless color_body_text contains '#' %}
  {% assign color_body_text = color_body_text | color_to_hex %}
{% endunless %}

default 过滤器保证商家第一次保存设置之前主题也能正常显示。

注意

color_to_hex 会丢弃透明度分量：rgba(41, 41, 41, 0.5) 会变成 #292929。在商家的透明度选择有意义的地方——遮罩、半透明头部——直接使用存储的原值，不要归一化。

把配色输出为 CSS 变量​

在布局引用的 snippet 里把设置一次性转成 CSS 变量，让整个主题从同一个地方读取颜色：

<style>
  :root {
    --color-body-text: {{ color_body_text }};
    --color-heading-text: {{ color_heading_text }};
    --color-btn-bg: {{ color_btn_bg }};
    --color-btn-text: {{ color_btn_text }};
    --color-border: {{ color_border }};
  }
</style>

如果颜色设置共用 color_ 前缀，也可以用循环生成变量，不必逐个列出：

{% for s in settings %}
  {% if s[0] contains 'color_' %}
    --{{ s[0] | replace: '_', '-' }}: {{ s[1] }};
  {% endif %}
{% endfor %}

全站消费变量​

在 section、snippet 和样式表里引用变量，不写裸值：

.product-card__title {
  color: var(--color-heading-text);
}
.btn--primary {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
}

商家在主题编辑器里改一个颜色，所有使用该角色的元素一起更新。硬编码颜色只用于对比度不受商家选择影响的元素——凡是商家能改色的地方都应该走变量。

保证对比度无障碍​

配色系统也把无障碍风险集中到了一处：一对糟糕的文字/背景搭配会扩散到全站。默认值要满足无障碍最佳实践中的对比度要求；对比度关键的元素上，避免让两个商家可配置的颜色互相搭配而不给出合理默认值。