Using Gin Dark mode with CKEditor5 in Layout Builder

Created on 14 March 2023, almost 2 years ago

When the Gin theme is set to dark mode, CKEditor5 shows in dark mode on the normal node edit form (body field). However, when placing a block onto a page in Layout Builder, the CKEditor5 WYSIWYG text field is still shown with a white background.

The text color is the correct "gray" value from dark mode, so it's just the background color that is wrong.

I see this CSS on the main editing area:

.ck.ck-editor__main > .ck-editor__editable, #drupal-off-canvas [data-drupal-ck-style-fence] .ck.ck-editor__main > .ck-editor__editable {
    background: var(--ck-color-base-background);
    border-radius: 0px;
}

And when I inspect the value of the "ck-color-base-background" field it is set to "#fff".

When I check this variable in a normal node edit CKEditor5 field, it is set to "var(--gin-bg-input)".

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇺🇸United States mpotter

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mpotter
  • Assigned to sakthi_dev
  • Issue was unassigned.
  • 🇮🇳India sakthi_dev

    Not reproducible, please provide the screenshots and the steps to reproduce from installation.

  • Status changed to Closed: cannot reproduce almost 2 years ago
  • 🇺🇸United States mpotter

    Hmm, just tried it in a fresh site and also cannot reproduce. Must be something specific to this other project theme that is bleeding into layout builder and gin. Although not sure how it would prevent the gin variables from being set correctly.

    In any case, closing due to not reproducing.

  • Status changed to Active almost 2 years ago
  • 🇺🇸United States mpotter

    Oh, nope, doh, I was testing CKEditor4 and not CKEditor5. I can still reproduce this (in D9.5.x)
    * Install and enable latest versions of `gin` and `gin_lb`
    * Set Admin theme to Gin, and enable "Use Admin theme for editing content"
    * In Gin Settings, set Appearance to Dark
    * Enable CKEditor5
    * Go into the Text formats and Editors config, select Basic HTML, set the editor to CKEditor5
    * Create a content type that uses Layout Builder
    * Create a page of that content type and go to Layout tab
    * Add a Basic Block to the page. The sidebar config flyout will be in dark mode, but CKEditor5 will have a white background.

  • Status changed to Needs review almost 2 years ago
  • 🇮🇳India chaitanyadessai Goa

    Adding patch for ckeditor in gin dark mode ,Please review.

  • 🇺🇸United States mpotter

    I think there are some additional colors that need tweaking for dark mode. In addition to the toolbar background, the toolbar text color needs to be set, along with the background of the select drop-down fields (like heading)

  • 🇮🇳India chaitanyadessai Goa

    @mpotter Adding patch with changes , please review

  • Status changed to Needs work over 1 year ago
  • 🇵🇱Poland bronismateusz

    Not working with rc3. Probably in path need change selector from `.ui-dialog .ck` to `.ck`

  • 🇺🇦Ukraine mamoruua

    The Gin theme should automatically load extended styles for CKEditor5, including dark mode support:

    This works well when CKEditor5 fields are present on the initially loaded page. However, when these fields are dynamically added via an AJAX callback, the styles are not loaded for unknown reasons.

    That's what helped me:

    /**
     * Implements hook_library_info_alter().
     */
    function YOUR_MODULE_library_info_alter(array &$libraries, string $extension): void {
      if ($extension == 'core') {
        $libraries['ckeditor5']['dependencies'][] = 'gin/ckeditor5';
      }
    }
    
Production build 0.71.5 2024