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

Store Design
,
1

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

1 Like
2

@erikapruett

yes can you please create separate schema code its work

3

Hi @erikapruett ,

You can follow these steps:

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

Screenshot.png
Screenshot.png1121×779 32.8 KB

Code:

,
{
        "type": "color",
        "id": "colors_accent_3",
        "default": "#877159",
        "label": "Accent 3"
}
  • Step 2: Assign color root at layout > theme.liquid file. For example:

Screenshot.png
Screenshot.png1045×743 56.4 KB

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!

4

Thank you SO much!!!

Worked like a dream :slightly_smiling_face:

1 Like
5

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!!