Change utility bar and announcement bar color for dawn theme

Topic summary

A user needed to change the Dawn theme’s utility/announcement bar to black with white text, as adjusting scheme colors wasn’t working.

Solutions Provided:

Two community members offered CSS code solutions:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add custom CSS targeting .utility-bar__grid.utility-bar__grid--3-col with background: black !important and appropriate text color styling

Outcome:

The issue was resolved — the user confirmed the CSS solution worked successfully. The discussion included screenshots showing the before state and the custom CSS section being modified.

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

Hello @kay_png

Add the below CSS in base.css file.

body .utility-bar__grid.utility-bar__grid--3-col {
background: #000;
}

OUTPUT:

Thanks