Twenty Twenty-One: background image does not work with dark mode

[WebsThatRock]

I noticed that if I add a background image by going to Appearance > Customize > Background Image > Add image and turn on the dark mode the website changes the text to white but it does not have a dark background. Instead, it shows that background image which is hard to read white text on.

I was trying to find a workaround where if it is in dark mode then make the background image either disappear or darken.

I do not see anywhere to attach a file so it may not be with this ticket.

Michael

[sabernhardt]

Hi @WebsThatRock and thanks for the report!

The team considered ​disabling background images with dark mode active, as usually the two features do not work well together.

Removing this specific background image in dark mode is likely your best option. You can paste this line within the Additional CSS section in Customizer:

 .is-dark-theme.custom-background { background-image: none; }

If we want to edit the theme for this, we could adjust the background-position so it's off screen. That could make it easier for users to override in the event that their background image does work in both modes.