Problem/Motivation

Noticed by accident, in dark mode the background in long text ckeditor based fields is white in dark mode on node edit forms for full and basic html text formats:

node edit form with just the title and the body and the textformat basic HTML selected in dark mode. the background of the ckeditor field is white the sample text barely visible
node edit form with just the title and the body and the textformat Restricted HTML selected in dark mode. the background of the ckeditor field is dark the sample text clearly visible
node edit form with just the title and the body and the textformat full HTML selected in dark mode. the background of the ckeditor field is white the sample text barely visible
node edit form with just the title and the body and the textformat Plain text selected in dark mode. the background of the ckeditor field is dark the sample text clearly visible

Update:

Turns out the problem was introduced with #3633459: Update CKEditor to 49.1.0. I went through the history looking for any issue related with ckeditor changes. the linked one was for updating ckeditor to version 49.1.0. I've discussed the problem with @kentr, and he was able to reproduce the issue after updating to the latest changes of main. the problem is not browser specific, is reproducible in safari and edge. he suggested to make sure it would be good to checkout specific commits:

git checkout -f acfffb4307a^ => the long text field is styled correctly
git checkout -f acfffb4307a => the long text field styling is broken in dark mode in default admin

Which is the proof that something broke with the update to 49.1.0

Steps to reproduce

Create a content type with a long text field and create a node of that content type

Proposed resolution

Ensure that the background for long text fields is not white for any text format and it meets the style of dark mode every time and in consequence that all text within that long text field has a color contrast of at least 4.5:1

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3637273

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

rkoller’s picture

Issue summary: View changes
rkoller’s picture

I would even consider it a priority of critical instead of major since node edit forms are one of the main top tasks users do.

rkoller’s picture

Issue summary: View changes

Updated the issue summary isolating the commit that introduced that problem thanks to @kentr

rkoller’s picture

Issue summary: View changes
rkoller’s picture

salmonek’s picture

StatusFileSize
new22.9 KB
new17.93 KB

There is more than editing area background. I noticed also issues with fullscreen, toolbar button clicked bg and balloons bg.
before
before
This may be a good opportunity to update to new design tokens system introduced in 49.0.0:
https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/theme-...
https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/theme-...
Legacy variables are still present, however at some point they will be removed from CKEditor and migration will be mandatory (there is no specified deprecation date as for now).
I have prepared a patch that replaces old variables with new token system. I aimed to preserve the previous look and ensure that dark mode issues are fixed. I'll post MR shortly.

salmonek’s picture

StatusFileSize
new21.84 KB
new19.6 KB

After changes:
after
after

As for the tooltip issue: https://www.drupal.org/project/drupal/issues/3633459#comment-16826554
The --ck-balloon-panel-background-color variable is not resolved now, so I hardcoded the previous resolve color:

  .ck.ck-balloon-panel.ck-tooltip {
    background: #121c2b;
  }
salmonek’s picture

Performance tests are failing. The stylesheet bytes doesn't match assert values. I'd like to update them once we have agreement that updates are ok to be merged.
Rest of failed tests are some PHP 8.6 Unit tests - failing both before and after changes.