📘 公式リファレンス📦 リファレンス/オブジェクト中級

color_scheme_group オブジェクト

テーマ設定の color_scheme_group セッティングで定義したカラースキームグループを参照するオブジェクト。色設定をセッティングから取得して CSS 変数として出力する。

用途

テーマカスタマイザーで管理者が複数のカラースキーム（日中モード・ダークモード等）を設定したとき、settings.color_schemes をループして CSS 変数に割り当て、ストア全体で統一された配色を適用する。

設置場所

theme.liquid の <style> タグ内で `{% for scheme in settings.color_schemes %}` としてループし、`{{ scheme.id }}` や `{{ scheme.settings.background }}` の形でプロパティを参照する。

注意点

color_scheme_group セッティングが theme settings JSON に定義されていることが前提。settings.color_schemes は配列なので、直接参照（例: `settings.color_schemes[0]`）ではなくループで全スキームを処理する必要がある。scheme.settings 以下のプロパティ名はテーマ設定 JSON で定義した色フィールドのラベル（background、text など）と一致させなければ nil になる。

タグ:color-schemetheme-settingscss-variablecustomization

仕様

31 行 / json

{
  "access": {
    "global": false,
    "parents": [],
    "template": []
  },
  "deprecated": false,
  "deprecation_reason": "",
  "description": "&gt; Tip:\n&gt; To learn about color schemes in themes, refer to [`color_scheme` setting](/themes/architecture/settings/input-settings#color_scheme).",
  "properties": [],
  "summary": "A color_scheme_group from a [`color_scheme_group` setting](/themes/architecture/settings/input-settings#color_scheme_group).",
  "name": "color_scheme_group",
  "examples": [
    {
      "name": "Referencing color_scheme_group settings directly",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{% for scheme in settings.color_schemes %}\n  .color-{{ scheme.id }} {\n    --color-background: {{ scheme.settings.background }};\n    --color-text: {{ scheme.settings.text }};\n  }\n{% endfor %}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "json_data": {
    "path": "/",
    "handle": "settings.color_schemes",
    "data_from_file": ""
  },
  "return_type": []
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/objects.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

color_scheme_group オブジェクト

仕様

出典・ライセンス

関連項目

content_for_header オブジェクト

metaobjects オブジェクト

additional_checkout_buttons オブジェクト

canonical_url オブジェクト

content_for_index オブジェクト

content_for_additional_checkout_buttons オブジェクト