Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#52185 new defect (bug)

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

Reported by: websthatrock's profile WebsThatRock Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: 2nd-opinion
Focuses: css Cc:


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.


Attachments (1)

Screen Shot 2020-12-28 at 5.28.37 PM.png (3.1 MB) - added by WebsThatRock 3 years ago.

Change History (3)

#1 @sabernhardt
3 years ago

  • Component changed from General to Bundled Theme
  • Focuses css added
  • Summary changed from When you add a background image dark mode does not work in WordPress Twenty-Twenty One to Twenty Twenty-One: background image does not work with dark mode

#2 @sabernhardt
3 years ago

  • Keywords 2nd-opinion added

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.

Note: See TracTickets for help on using tickets.