Color schemes

A color scheme is a named set of colours (background, text, accent) that merchants apply to a section with one choice. Sahil has three schemes plus a brand scheme.

1. Define the colours in theme settings

config/settings_schema.json (excerpt)

{
  "name": "Colors",
  "settings": [
    { "type": "header", "content": "Scheme 1" },
    { "type": "color", "id": "scheme_1_background", "label": "Background", "default": "#FBF8F3" },
    { "type": "color", "id": "scheme_1_text", "label": "Text", "default": "#1C1917" },
    { "type": "color", "id": "scheme_1_accent", "label": "Accent", "default": "#1C1917" },
    { "type": "color", "id": "scheme_1_accent_text", "label": "Accent text", "default": "#FFFFFF" }
  ]
}

2. Turn each scheme into a CSS class

In a snippet rendered in the layout’s <head>:

snippets/css-variables.liquid

{%- style -%}
  {%- for i in (1..3) %}
    {%- assign bg = 'scheme_' | append: i | append: '_background' -%}
    {%- assign fg = 'scheme_' | append: i | append: '_text' -%}
    .scheme-{{ i }} {
      --bg: {{ settings[bg] }};
      --fg: {{ settings[fg] }};
      --muted: color-mix(in srgb, var(--fg) 62%, var(--bg));
      background: var(--bg);
      color: var(--fg);
    }
  {%- endfor %}
{%- endstyle -%}

settings[bg] reads a setting whose ID you build. {% style %} updates in the editor as the merchant changes a colour.

3. Let sections pick a scheme

{ "type": "select", "id": "color_scheme", "label": "Color scheme", "default": "1",
  "options": [{ "value": "1", "label": "Scheme 1" }, { "value": "2", "label": "Scheme 2" }, { "value": "3", "label": "Scheme 3" }] }

<div class="section scheme-{{ section.settings.color_scheme }}">…</div>

Use only the scheme’s variables (var(--bg), var(--fg)) inside sections, so every section looks right in every scheme.

Check contrast

Text must have a contrast of at least 4.5:1 with its background. The color_brightness filter helps pick readable text automatically, and color_mix and color_modify derive tints from a scheme.

The color_scheme setting types

color_scheme_group and color_scheme are accepted so Shopify themes upload; color_scheme gives the scheme ID. The pattern above works without them and keeps the CSS in your hands.