Add third background color Dawn Theme

[jonglaj]

Hey everybody, I am new to Shopify Programming and I am confused about the structure. 

I want to add a third background color for the Dawn Theme, so it can be used in the announcement bar.

I figured so far that variables of the theme are stored in theme.liquid  

I added the selection of a new color to settings_schema.json 

Click to expand...

{
"type": "color",
"id": "colors_background_3",
"default": "#F3F3F3",
"label": "t:settings_schema.colors.settings.colors_background_3.label"
},
{
"id": "gradient_background_3",
"type": "color_background",
"label": "t:settings_schema.colors.settings.gradient_background_3.label"
}

to announcement-bar.liquid I added: 

Click to expand...

{
"value": "background-3",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__3.label"
}

 This works so far. Now to the implementation in the FE, I think I am supposed to change base.css  but I can not wrap my head around where I need to change it. Could someone give me a hint?

[oscprofessional]

Hi @jonglaj ,

Which background color you want for announcement bar ? 

share the color also share the store link so i can give you the solution.

[jonglaj]

Link is : https://in-the-air2022.myshopify.com/admin

I would like to try it with #67568c

However I'd be also curious to know how to implement it 

[jonglaj · Accepted solution]

I figured the solution - it is pretty simple

right on top of the base.css , I needed to add following passage. 

Click to expand...

.color-background-3 {
--color-background: var(--color-base-background-3);
--gradient-background: var(--gradient-base-background-3);
}

[crissbycriss]

Wish it were that easy, needed to add code in more files besides base.css, I had to look into settings_schema.json, settings_data.json, theme.liquid, en.default.schema.json and any subsequent widget files which can use the new Background 3 color (e.g. image_with_text.liquid). This is for the Ride theme, but I presume the process of adding a Backg 3 color is the same for other themes.

[aciel]

Hi, did you manage to do it ? I have my third background in the colors settings, but I can't apply it to my sections, it doesn't appear.

[asafari]

But how do I set the color? After adding that there's nowhere in the Theme Editor where that gets added and I can't figure out how to set the color.

[oscprofessional]

@asafari ,

Share your issue and URL.

[asafari]

Hi, I am using the Refresh theme so maybe that's why it's not working. After I add the code nothing happens, I have of course haven't assigned a color to BG3 yet but I don't where to do that either...
Normally you go in the Shopify Editor and you can change the theme settings but this code doesn't add anything to the editor and my attempts to manually add a color to the code didn't work either.

[oscprofessional]

@jonglaj ,

Password ? please share

[oscprofessional]

@jonglaj ,

Try this code 

.announcement-bar.color-background-1.gradient {
    background: #67568c;
}

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->base.scss.liquid

If it will not work then share the URL Password.

[Generasito]

Hi! Thanks for the great info. Would you be willing to share each of the snippets you drop into each of the files? I get an error when I try to update the JSON files, saying unexpected token and similar. I was able to update some of the files, but haven't been able to arrive at the solution. I am not a developer, but comfortable editing files. Thank you!