color_schemes setting type is not working at all

[jonkeols]

I have been trying to add the color_schemes settings to my theme but am unable to do that. I am always getting the error

10:20:20 ERROR  » update config/settings_schema.json:
  Section 2: setting with id="color_schemes" invalid setting type

This is in my settings_schema.json

 {
    "name": "schemes",
    "settings": [
      {
        "type": "color_schemes",
        "id": "color_schemes",
        "definition": [
          {
            "type": "header",
            "content": "Typography"
          },
          {
            "type": "color",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "header",
            "content": "Background"
          },
          {
            "type": "color",
            "id": "background",
            "label": "Background"
          },
          {
            "type": "color_background",
            "id": "background_gradient",
            "label": "Gradient"
          },
          {
            "type": "header",
            "content": "Additional"
          },
          {
            "type": "color",
            "id": "secondary_background",
            "label": "Secondary"
          },
          {
            "type": "color",
            "id": "secondary_foreground",
            "label": "Secondary Foreground"
          },
          {
            "type": "color",
            "id": "tertiary_background",
            "label": "Tertiary"
          },
          {
            "type": "color",
            "id": "tertiary_foreground",
            "label": "Tertiary Foreground"
          }
        ],
        "role": {
          "primary": {
            "solid": "background",
            "gradient": "background_gradient"
          },
          "primary_contrasting": "text",
          "secondary": "secondary_background",
          "secondary_contrasting": "secondary_foreground",
          "tertiary": "tertiary_background",
          "tertiary_contrasting": "tertiary_foreground"
        }
      }
    ]
  },

I was following the instructions on: https://shopify.dev/themes/architecture/settings/input-settings#color_schemes

[Moira]

Hey @jonkeols,

The "type" field in the definition of your color_schemes setting is invalid. You should use "color" for the type field instead.

Here's an updated version of your code:

{
    "name": "schemes",
    "settings": [
      {
        "type": "color",
        "id": "color_schemes",
        "definition": [
          {
            "type": "header",
            "content": "Typography"
          },
          {
            "type": "color",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "header",
            "content": "Background"
          },
          {
            "type": "color",
            "id": "background",
            "label": "Background"
          },
          {
            "type": "color",
            "id": "background_gradient",
            "label": "Gradient"
          },
          {
            "type": "header",
            "content": "Additional"
          },
          {
            "type": "color",
            "id": "secondary_background",
            "label": "Secondary"
          },
          {
            "type": "color",
            "id": "secondary_foreground",
            "label": "Secondary Foreground"
          },
          {
            "type": "color",
            "id": "tertiary_background",
            "label": "Tertiary"
          },
          {
            "type": "color",
            "id": "tertiary_foreground",
            "label": "Tertiary Foreground"
          }
        ],
        "role": {
          "primary": {
            "solid": "background",
            "gradient": "background_gradient"
          },
          "primary_contrasting": "text",
          "secondary": "secondary_background",
          "secondary_contrasting": "secondary_foreground",
          "tertiary": "tertiary_background",
          "tertiary_contrasting": "tertiary_foreground"
        }
      }
    ]
  } 

[jonkeols]

Hello,

Then i get this error: 

08:30:23 ERROR  » update config/settings_schema.json:
  Section 2: setting with id="color_schemes" 'definition' is not a valid attribute
  Section 2: setting with id="color_schemes" 'role' is not a valid attribute

As you can see is that i followed the snippet from https://shopify.dev/themes/architecture/settings/input-settings#color_schemes

[Columbus_Themes]

Was about to ask about the same issue. Getting the same error in ThemeKit.

Hope they update them ASAP.

[jonkeols]

Hello @Moira , please see my latest answer https://community.shopify.com/c/technical-q-a/color-schemes-setting-type-is-not-working-at-all/m-p/1...

[Moira]

@jonkeols 

Hmm looks like the "definition" and "role" attributes are not supported by the "color" setting type in the theme settings schema. You should try removing them from your code:

{
"name": "schemes",
"settings": [
{
"type": "color",
"id": "background",
"label": "Background"
},
{
"type": "color",
"id": "background_gradient",
"label": "Gradient"
},
{
"type": "color",
"id": "text",
"label": "Text"
},
{
"type": "color",
"id": "secondary_background",
"label": "Secondary"
},
{
"type": "color",
"id": "secondary_foreground",
"label": "Secondary Foreground"
},
{
"type": "color",
"id": "tertiary_background",
"label": "Tertiary"
},
{
"type": "color",
"id": "tertiary_foreground",
"label": "Tertiary Foreground"
}
]
}

 You can then access these color settings in your theme templates and stylesheets using the settings object, for example {{ settings.background }}.

[jonkeols]

@Moira I don't want the color setting, that i know how to do. I want the color_schemes to work as the documentation state it to work. Is this feature (color_schemes) not currently available? 

https://shopify.dev/themes/architecture/settings/input-settings#color_schemes

[Wildnefalem5]

The problem is setting up a new type called "color_schemes".

It is described in the documentation, but the fact does not work, the theme throws an error.

https://shopify.dev/themes/architecture/settings/input-settings#color_schemes

[jonkeols]

 @Wildnefalem5 Yes exactly

[jonkeols · Accepted solution]

@Columbus_Themes @Wildnefalem5 @Moira 

This is a new feature that yet has not been "released". Now it is more detailed in the documentation with 

Developer preview
This input setting is currently available only in the Online Store color scheme developer preview and can be used without restrictions in a development store.

https://shopify.dev/docs/api/release-notes/developer-previews#online-store-color-scheme-developer-pr...

[vinodkalyan]

add default settings in settings_data.json file