color_scheme_group

A color_scheme_group from a color_scheme_group setting.

Tip

To learn about color schemes in themes, refer to color_scheme setting.

{}

Anchor to Referencing color_scheme_group settings directly

Referencing color_scheme_group settings directly

{% for scheme in settings.color_schemes %}

.color-{{ scheme.id }} {

--color-background: {{ scheme.settings.background }};

--color-text: {{ scheme.settings.text }};

}

{% endfor %}

Code

{% for scheme in settings.color_schemes %}
  .color-{{ scheme.id }} {
    --color-background: {{ scheme.settings.background }};
    --color-text: {{ scheme.settings.text }};
  }
{% endfor %}

Data

{
  "settings": {
    "color_schemes": {}
  }
}

Output

.color-background-1 {

--color-background: #FFFFFF;

--color-text: #121212;

}

.color-background-2 {

--color-background: #F3F3F3;

--color-text: #121212;

}

.color-inverse {

--color-background: #121212;

--color-text: #FFFFFF;

}

.color-accent-1 {

--color-background: #121212;

--color-text: #FFFFFF;

}

.color-accent-2 {

--color-background: #334FB4;

--color-text: #FFFFFF;

}

Output

.color-background-1 {
    --color-background: #FFFFFF;
    --color-text: #121212;
  }

  .color-background-2 {
    --color-background: #F3F3F3;
    --color-text: #121212;
  }

  .color-inverse {
    --color-background: #121212;
    --color-text: #FFFFFF;
  }

  .color-accent-1 {
    --color-background: #121212;
    --color-text: #FFFFFF;
  }

  .color-accent-2 {
    --color-background: #334FB4;
    --color-text: #FFFFFF;
  }

Was this section helpful?

Example

Referencing color_scheme_group settings directly

Code

Data

Output

Output