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.

[karmatosed]

Thank you everyone for your work on this, based on the following I am going to recommend this is closed:

• There was a consideration to disable the background images as @sabernhardt shared.
• There have been a number of years passed so we do for now want to limit styling changes.
• There is a workaround for dark mode.

This doesn't mean we shouldn't be open to feedback or considering other options, so for now I am going to add the keyword and get that input.

[karmatosed]

As we've not had any responses since the close keyword I am going to progress this now.