WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 9 months ago

Last modified 9 months 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 10 months ago.
51985.diff (3.9 KB) - added by justinahinon 10 months ago.
51985.2.diff (496 bytes) - added by justinahinon 10 months ago.
51985.3.patch (543 bytes) - added by poena 9 months ago.
Use the primary color for text color
darkmode.png (1.9 KB) - added by poena 9 months ago.

Download all attachments as: .zip

Change History (19)

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

#3 @mukesh27
10 months 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
10 months 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
10 months ago

  • Keywords good-first-bug added

#6 @poena
10 months 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
10 months ago

#7 @poena
9 months ago

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

@poena
9 months ago

Use the primary color for text color

@poena
9 months ago

#8 @poena
9 months ago

  • Keywords needs-testing added; needs-patch removed

#9 @hellofromTonya
9 months ago

  • Keywords has-patch added

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


9 months ago

#11 @desrosj
9 months 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
9 months ago

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

Reopening for backport.

#13 @desrosj
9 months 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
9 months 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.