Colors of pages not matching colors of theme (footer).

Store Design
, ,

Topic summary

A Shopify store owner using the Dawn theme is experiencing a color mismatch between page backgrounds and the theme’s default footer color. The FAQ and other pages display white backgrounds instead of the grey (#f3f3f3) used throughout the rest of the site.

Initial Problem:

  • White page backgrounds don’t match the grey Dawn theme footer
  • Theme customization UI doesn’t provide options to change page colors
  • Initial CSS attempts targeting .section and .shopify-section were unsuccessful

Proposed Solution:
A community member suggested adding CSS code to target #MainContent with background: #f3f3f3 !important; in the base.css file.

Current Status:
The issue remains unresolved. While the suggested code partially improved the color match, the original poster reports there’s still a visible difference between the page background and footer color, even after clearing cache and testing in incognito mode. The discrepancy persists despite the solution appearing to work in the helper’s screenshot.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I would like the background of pages on my webshop to match the colour of the theme i’ve selected. The page background color now shows as white which is different to the rest of the website and doesn’t look nice.

To give you an idea. Below image you see a screenshot of my FAQ page which has a white background. While the default colour of the dawn theme I picked is grey (footer colour).

HereNowOwner_0-1743702533296.png
HereNowOwner_0-1743702533296.png400×238 12.5 KB

On the default page design I don’t have this issue(this how I want my entire shop/all pages to look. Same background colour all the way through):

HereNowOwner_1-1743702533312.png
HereNowOwner_1-1743702533312.png400×280 38.6 KB

The customization UI doesn’t allow me to change the color of the pages. I’ve tried adding the following code to my base.css but with no succes:

}
section, .shopify-section, .section {
background: #f3f3f3 !important;
}

Does anyone have a lasting solution for this so that the pages always match the dawn theme 2 colors?

Store: www.herenowbrand.com

Thanks so much for the help!

2

Hi @HereNowOwner , to do that, you can follow these steps:

Step 1: Open Online Store → Themes → Edit code

Step 2: Find base.css file

Step 3: Paste this code at the bottom of the file

#MainContent { 
 background: #f3f3f3 !important;
}

Result:

B2Bridge_0-1743735797122.png
B2Bridge_0-1743735797122.png1474×919 63.8 KB

If this helpful, please let us know by giving us a like and marking it as a solution. Thanks

1 Like
3

Hi @B2Bridge

Thanks for the reply. I’ve implemented your code and the page colour indeed changed and now matches the theme color better, but there is still a difference I see:

HereNowOwner_0-1743749659366.png
HereNowOwner_0-1743749659366.png1442×779 23.1 KB

I’ve deleted my cache and viewed the website incognito but both results show the same for me and page colour still arent the same. Do you know why you see the desired solution but when I implement it it’s not showing as you have it?

Thx