Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#51985 closed defect (bug) (fixed)

Twenty Twenty-One: Dark Mode and code blocks

Reported by: slaffik's profile slaFFik Owned by: desrosj's profile 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 4 years ago.
51985.diff (3.9 KB) - added by justinahinon 4 years ago.
51985.2.diff (496 bytes) - added by justinahinon 4 years ago.
51985.3.patch (543 bytes) - added by poena 4 years ago.
Use the primary color for text color
darkmode.png (1.9 KB) - added by poena 4 years ago.

Download all attachments as: .zip

Change History (19)

#1 @poena
4 years 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
4 years 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 4 years ago by slaFFik (previous) (diff)

#3 @mukesh27
4 years 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
4 years 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
4 years ago

  • Keywords good-first-bug added

#6 @poena
4 years 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
4 years ago

@justinahinon
4 years ago

#7 @poena
4 years ago

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

@poena
4 years ago

Use the primary color for text color

@poena
4 years ago

#8 @poena
4 years ago

  • Keywords needs-testing added; needs-patch removed

#9 @hellofromTonya
4 years ago

  • Keywords has-patch added

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


4 years ago

#11 @desrosj
4 years 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 years ago

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

Reopening for backport.

#13 @desrosj
4 years 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 years 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.