Background layout looks different locally vs deployed.

[monstermuffin]

I have been working on my site locally and have been using the 'background' layout and thought it looked really good however when deployed I am getting a solid block in the middle of the page using this layout.

Hugo version: 0.110.0
Using git submodule.

I can see that on the documentation the 'background' layout does actually have the solid, so I'm not sure why mine looks different (and IMO muuuuch better). I have tested across different browsers and mine always looks the same.

Example of local:

Example of hosted:

This is across my homepage/posts/pages.

My config for [homepage]:

[homepage]
  layout = "background" # valid options: page, profile, hero, card, background, custom
  homepageImage = "/img/homepageimage.jpg" # used in: hero, and card
  showRecent = true
  showRecentItems = 5
  showMoreLink = true
  showMoreLinkDest = "/posts"
  cardView = false
  cardViewScreenWidth = false
  layoutBackgroundBlur = false # only used when layout equals background

Thanks :)

[monstermuffin]

Ignore me.

Literally as soon as I posted this I realised dark reader was enabled on my deployed sites and it was darkreader messing it up.

Sorry about this, hope this can help someone else who uses dark reader too!