Dawn - Add more default Accent/Background colours, or enable specific section colour changes

Technical Q&A

Topic summary

A user seeks to customize background colors for Collection list and Image with text sections on their chocolate wholesale website, which features multiple brands. Currently, the Dawn theme restricts them to only 3 default accent/background color options.

Specific Request:

  • Ability to set different background colors for different brand sections
  • Example: yellow background for specific sections
  • Desired color: #0f364d

Solution Provided:
A CSS code snippet was offered targeting:

  • .image-with-text__media elements
  • .section- related classes
  • Template-specific IDs for featured collections and image-with-text sections

The CSS applies background-color: #0f364d to the specified sections, allowing customization beyond the theme’s default 3-color limitation.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

You can see on this page, our chocolate wholesale website sells a few different chocolate brands.

I’d like to be able to set more different colours for things like the background of the Collection list and Image with text sections. Is it possible to either add more options for default colours within the theme, or use the custom CSS to amend the background colours easily? Any other ideas would be much appreciated :slightly_smiling_face:

Example of yellow background which I would like to amend to different colours for different brands but currently restricted to only 3 colours.

GrahamT_0-1705923030683.png
GrahamT_0-1705923030683.png1201×382 134 KB

https://adarchocolates.com/pages/our-brands

2

Hey @GrahamT ,

Could you do me a favour and highlight the parts you need to color, what colors you would like them to be, and I will provide the CSS code for you.

3

That’ll be perfect thank you.

#0f364d

GrahamT_0-1705925879746.png
GrahamT_0-1705925879746.png626×614 112 KB

4

Hey @GrahamT ,

This should work for you

.image-with-text__media.image-with-text__media--adapt.gradient.color-inverse.global-media-settings.media,
.section-template--18459136033056__featured_collection_Ca69YL-padding,
div#ImageWithText--template--18459136033056__image_with_text_V8nG6N {
    background-color: #0f364d;
}