Hello,
I created custom theme from scratch i wanted to add color schemes, I added below code in settings_scheme.json
but it shows error schemes are not showing. Please help!!!
[
{
“name”: “theme_info”,
“theme_name”: “Theme”,
“theme_version”: “0.1”,
“theme_author”: “Shopify”,
“theme_documentation_url”: “https://help.shopify.com/manual/online-store/themes”,
“theme_support_url”: “https://support.shopify.com/”
},
{
“name”: “Logo”,
“settings”: [
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 300,
“step”: 10,
“default”: 100,
“unit”: “px”,
“label”: “Logo Width”
},
{
“type”: “image_picker”,
“id”: “favicon”,
“label”: “Favicon”,
“info”: “Add Favicon”
}
]
},
{
“name”: “Color”,
“settings”: [
{
“type”: “color_scheme_group”,
“id”: “color_schemes”,
“definition”: [
{
“type”: “color”,
“id”: “text”,
“label”: “Text”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “#FFFFFF”
},
{
“type”: “color_background”,
“id”: “background_gradient”,
“label”: “Gradient”,
“info”: “Background gradient replaces background where possible.”
},
{
“type”: “color”,
“id”: “primary_button”,
“label”: “Primary”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “on_primary_button”,
“label”: “On Primary Button”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “primary_button_border”,
“label”: “Primary Button Border”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “secondary_button”,
“label”: “Secondary Button”
},
{
“type”: “color”,
“id”: “on_secondary_button”,
“label”: “On Secondary Button”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “secondary_button_border”,
“label”: “Secondary Button Border”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “icons”,
“label”: “Icons”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “links”,
“label”: “Links”,
“default”: “#121212”
}
],
“role”: {
“background”: {
“solid”: “background”,
“gradient”: “background_gradient”
},
“text”: “text”,
“primary_button”: “primary_button”,
“on_primary_button”: “on_primary_button”,
“primary_button_border”: “primary_button_border”,
“secondary_button”: “secondary_button”,
“on_secondary_button”: “on_secondary_button”,
“secondary_button_border”: “secondary_button_border”,
“icons”: “icons”,
“links”: “links”
}
}
]
}
]
Here is error screenshot :
Also i added below code in theme.liquid but not working
{% style %}
{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ‘, .color-’ | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
–color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
–gradient-background: {{ scheme.settings.background_gradient }};
{% else %}
–gradient-background: {{ scheme.settings.background }};
{% endif %}
{% liquid
assign background_color = scheme.settings.background
assign background_color_brightness = background_color | color_brightness
if background_color_brightness <= 26
assign background_color_contrast = background_color | color_lighten: 50
elsif background_color_brightness <= 65
assign background_color_contrast = background_color | color_lighten: 5
else
assign background_color_contrast = background_color | color_darken: 25
endif
%}
–color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
–color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
–color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
–color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
–color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
–color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
–color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
–color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
–color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}
{{ scheme_classes | prepend: ‘body’ }} {
color: rgba(var(–color-foreground), 0.75);
background-color: rgb(var(–color-background));
}
{% endstyle %}