How can I add an additional color to my theme settings in Dawn?

[erikapruett]

Hi!

I have customized the dawn theme. I have hardcoded colors in a custom.css file, but I want to be able to change it from the user side.

Any tips on how would I add an additional color "Accent 3" under Theme Settings > Colors? 

I have several specified pieces of CSS code that I would want it to affect.

For example...

/* Styles "Most Loved Items" collection title on the homepage, icon titles on the homepage, "From the blog" title on the homepage, and blog article h2 */

.title, .multicolumn-list h3,  .blog__title.h1, .blog__title.h2, .blog__title.h0, .article-template__content > h2 {

color: #877159;

}

 /* Styles header text when overlapping */

.image-with-text--overlap .h1, .image-with-text--overlap .h2, .image-with-text--overlap .h0 {

  color:#877159;

}

 /* Styles collection heading "Popular Collections" */

.collection-list-title {

color: #877159;

}

You can see the site at: https://isla-theme.myshopify.com

Password: demo

Thanks in advance for the help!

Erika

[KetanKumar]

@erikapruett 

yes can you please create separate schema code its work 

[Litos · Accepted solution]

Hi @erikapruett,

You can follow these steps:

- Step 1: Assign color variable at config > settings_schema.json file. For example:

Code:

,
{
        "type": "color",
        "id": "colors_accent_3",
        "default": "#877159",
        "label": "Accent 3"
}

- Step 2: Assign color root at layout > theme.liquid file. For example:

Code:

--color-accent-3: {{ settings.colors_accent_3 }};

- Step 3: Go to custom.css file and change the code:

#877159 => var(--color-accent-3)

Hope it helps!

[erikapruett]

Thank you SO much!!!

Worked like a dream 🙂

[erikapruett]

Once I updated to Dawn 12, this no longer works.

Any idea why this might be or what I need to change?
Website: https://isla-base-theme.myshopify.com/
password: demo

Thank you!!