# 配色系统

> 用按角色划分的 color 设置和 CSS 变量为 Shoplazza 主题搭建可复用配色系统，商家改一处即可为整个店面换色。

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

## 按角色定义颜色设置

在 `config/settings_schema.json` 里添加 [`color` 设置](/docs/theme/architecture/settings/input-settings#color)，按**角色**（颜色的用途）定义，而不是按元素逐个定义：

```json
{
  "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`](/docs/theme/references/liquid/filters/color#color_to_hex) 过滤器可以把任意 CSS 颜色字符串转成 `hex6`：

```liquid
{% 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` 过滤器保证商家第一次保存设置之前主题也能正常显示。

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

## 把配色输出为 CSS 变量

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

```liquid
<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_` 前缀，也可以用循环生成变量，不必逐个列出：

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

## 全站消费变量

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

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

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

## 保证对比度无障碍

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