Make WordPress Core

Opened 3 years ago

Last modified 7 weeks ago

#53533 new defect (bug)

Twenty Twenty-One: Dark Mode creating conflict with custom colour inside editor

Reported by: alanjacobmathew's profile alanjacobmathew Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: dev-feedback
Focuses: Cc:

Description

v: 5.8-beta4-51244. Theme: Twenty Twenty-One No plugins Installed.

Make sure the dark mode setting is switched ON is 'Customize page'.

The current Dark Mode settings inside the Twenty Twenty-One theme only works with the default colours inside the editor. Currently I believe dark mode functions by inverting the colours, but if that is the case it only inverts the default colours inside editor.

Below are the test cases, when the colour in text editor is not changed.


When Dark Mode is OFF
background colour is light and content colour is black

When Dark mode is ON
background colour is dark and content colour becomes white/light


Case when the user changes the colour of the text


Dark Mode is OFF
background colour is light. User changes the text colour to something dark other than the default black(say dark blue)

Dark Mode is ON
background colour is dark and the content colour remains same as the above case(here dark blue).

Here the issue is, depending on the visitors browser settings for dark mode, the website automatically switches to dark mode on the front end. And in-case the website owner has enabled dark mode settings in the 'Appearance section' and has posts or pages or even links written in custom colour, it may remain invisible to the visitors.

Attachments (2)

default color.gif (109.4 KB) - added by alanjacobmathew 3 years ago.
dark mode if editor color settings is default
custom color.gif (154.6 KB) - added by alanjacobmathew 3 years ago.
dark mode if editor color settings is customized

Download all attachments as: .zip

Change History (6)

@alanjacobmathew
3 years ago

dark mode if editor color settings is default

@alanjacobmathew
3 years ago

dark mode if editor color settings is customized

#1 @desrosj
3 years ago

  • Component changed from Editor to Bundled Theme
  • Summary changed from Dark mode creating conflict with custom colour inside editor to Twenty Twenty-One: Dark Mode creating conflict with custom colour inside editor

Moving to bundled themes because Dark Mode is specific to Twenty Twenty-One.

#2 @SergeyBiryukov
3 years ago

#53559 was marked as a duplicate.

#3 @poena
2 years ago

Hi!
You are correct, the code in the theme does not update the custom colors when dark mode is enabled.
This decision was made on purpose, many users would find it unexpected if the theme replaced their custom colors. But also because of the complexity of replacing the colors.

When a user selects a custom color for a block using the color picker, WordPress adds the color code inline, directly on the element. Example:
<p class="has-text-color" style="color:#f20000">Paragraph</p>

Last edited 2 years ago by poena (previous) (diff)

#4 @karmatosed
7 weeks ago

  • Keywords dev-feedback added
Note: See TracTickets for help on using tickets.