Change Buttons color without changing announcement bar color - Dawn theme

Store Design

Topic summary

A user needed to change all button colors on their Dawn theme website to a dark background (#363636) with white text (#FFFFFF) without affecting the announcement bar colors. The issue arose because buttons and announcement bars appeared to be linked in the theme editor.

A solution was provided involving custom CSS:

  • Navigate to Online Store → Themes → Edit Code
  • Open Assets/base.css
  • Add custom CSS targeting button classes at the bottom of the file
  • The code snippet sets background-color to #363636 and color to #fff for specific button selectors

The solution successfully resolved the issue, allowing independent styling of buttons while preserving announcement bar colors.

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

Hi everyone, I need to change all buttons color in my website to be background color (#363636) and text color (#FFFFFF). But without changing anything else especially the announcement bar colors, because both buttons and announcement bars are somehow linked together when I edit them from the theme editor.

Website: www.mariamsatour.com

password: hellosatour

Thank you

2

Hi @mariamsatour

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Copy code below to bottom of file
.button, .shopify-challenge__button, .customer button {
	background-color: #363636;
	color: #fff;
}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

1 Like
3

Thank you it worked!