How to change color of announcement bar in Dawn theme

Store Design

Topic summary

Goal: change the Dawn theme’s announcement bar color beyond the default palette.

  • Initial guidance: use the Theme Customizer to set the announcement bar’s color scheme (e.g., “Accent 2”), then modify that accent color in the theme settings. This leverages Dawn’s built-in color schemes.
  • User need: a custom pink not present in the default colors. The built-in approach was unclear for this use case.

Solution implemented:

  • Add a CSS rule in base.css targeting the announcement bar to set a custom background color (e.g., #E9CED9) with !important to override theme styles. The OP and another user confirmed it worked.

Context:

  • Dawn is a Shopify theme; the announcement bar is the top banner. base.css is the theme’s stylesheet. Screenshots were shared to illustrate the Customizer color scheme settings; the CSS snippet was central to the fix.

Open question:

  • How to style two announcement bars with different colors. No answer provided yet; discussion remains partially open.
Summarized with AI on January 14. AI used: gpt-5.
3

Hi Bluish,

Thank you for your response. I actually want to change the color to
something other than the black, white, and green colors available on the
Dawn theme. I wanted more of a pink color to match the rest of my website
branding. Is there any way for me to change the color of the announcement
bar to a setting outside of the default colors?

Thank you,
Melissa