WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#51985 closed defect (bug) (fixed)

Twenty Twenty-One: Dark Mode and code blocks

Reported by: slaFFik Owned by: desrosj
Milestone: 5.6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-screenshots, good-first-bug, needs-testing, has-patch, fixed-major, twenty-twenty-one-1.1
Focuses: Cc:

Description

I've installed the 2021 that comes with WP 5.6.
Activated the Dark Mode.
One of my blog posts has a code snippet, which was added to the post using the default code block inside the Gutenberg editor.

See attached how the code looks in the Dark Mode.

Attachments (5)

photo_2020-12-09_13-18-00.jpg (36.6 KB) - added by slaFFik 5 weeks ago.
51985.diff (3.9 KB) - added by justinahinon 5 weeks ago.
51985.2.diff (496 bytes) - added by justinahinon 5 weeks ago.
51985.3.patch (543 bytes) - added by poena 5 weeks ago.
Use the primary color for text color
darkmode.png (1.9 KB) - added by poena 5 weeks ago.

Download all attachments as: .zip

Change History (19)

#1 @poena
5 weeks ago

Hi!

Thank you for reporting this.
May I ask if you also have the Gutenberg plugin installed and in that case, which version?

#2 @slaFFik
5 weeks ago

No, just the default editor in WordPress 5.6 itself.
The post was initially created using WP 5.5 and its default Gutenberg editor.

Last edited 5 weeks ago by slaFFik (previous) (diff)

#3 @mukesh27
5 weeks ago

Hi!

There is an issue in below Gutenberg CSS - https://github.com/WordPress/WordPress/blob/master/wp-includes/css/dist/block-library/theme.css#L79

.wp-block-code { color: #1e1e1e; }

#4 @desrosj
5 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.6.1

Thanks for the report!

I am also able to reproduce with a bare bones fresh install. Moving to 5.6.1 to get this fixed.

#5 @Presskopp
5 weeks ago

  • Keywords good-first-bug added

#6 @poena
5 weeks ago

I am able to reproduce this on the front both with dark mode enabled,
and with dark mode disabled but with a dark body background color selected in the Customizer.

In the editor the text color is correct.

@justinahinon
5 weeks ago

@justinahinon
5 weeks ago

#7 @poena
5 weeks ago

I have tested 51985.2 and the text color is still #1e1e1e as mentioned in #3.

@poena
5 weeks ago

Use the primary color for text color

@poena
5 weeks ago

#8 @poena
5 weeks ago

  • Keywords needs-testing added; needs-patch removed

#9 @hellofromTonya
5 weeks ago

  • Keywords has-patch added

This ticket was mentioned in Slack in #core-themes by poena. View the logs.


4 weeks ago

#11 @desrosj
4 weeks ago

  • Owner set to desrosj
  • Resolution set to fixed
  • Status changed from new to closed

In 49825:

Twenty Twenty-One: Make text within code blocks readable in Dark Mode.

This change ensures that the primary text color specific to Dark Mode is used instead of the one specified for normal mode. The latter is not legible in Dark Mode.

Props slaFFik, poena, mukesh27, justinahinon.
Fixes #51985.

#12 @desrosj
4 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#13 @desrosj
4 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 49852:

Twenty Twenty-One: Make text within code blocks readable in Dark Mode.

This change ensures that the primary text color specific to Dark Mode is used instead of the one specified for normal mode. The latter is not legible in Dark Mode.

Props slaFFik, poena, mukesh27, justinahinon.
Merges [49825] to the 5.6 branch.
Fixes #51985.

#14 @desrosj
4 weeks ago

  • Keywords twenty-twenty-one-1.1 added

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.

Note: See TracTickets for help on using tickets.