Problem/Motivation

Trying to make dark theme for the website.

Steps to reproduce

I have made a subtheme of Olivero, but CKEditor5 ignores all my attempts to change background color.

I don't understand what I'm doing wrong.

"--ck-color-base-background" variable seem to be generated somewhere in javascript and I'm unable to override it.

1

2

/srv/http/sites/all/themes/olivero_dark/olivero_dark.info.yml

name: Olivero Dark
type: theme
base theme: olivero
description: 'Dark Olivero front-end theme.'
alt text: 'Screenshot of Olivero, Drupal front-end theme.'
package: Core
version: VERSION
core_version_requirement: ^10
libraries:
  - olivero_dark/global-styling
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  hero: 'Hero (full width)'
  highlighted: Highlighted
  breadcrumb: Breadcrumb
  social: Social Bar
  content_above: Content Above
  content: Content
  sidebar: 'Sidebar'
  content_below: 'Content Below'
  footer_top: 'Footer Top'
  footer_bottom: 'Footer Bottom'
libraries-override:
  olivero/tabs:
    css:
      theme:
        css/components/tabs.css: css/components/tabs.css
  olivero/details:
    css:
      theme:
        css/components/details.css: css/components/details.css
  olivero/tags:
    css:
      theme:
        css/components/tags.css: css/components/tags.css
ckeditor5-stylesheets:
  - css/base-ckeditor5.css
/srv/http/sites/all/themes/olivero_dark/css/base-ckeditor5.css

:root
{
  --ck-color-base-foreground: var(--color-text-neutral-medium);
  --ck-color-base-background: var(--color-white);
}

body {
  color: #F0F; /*var(--color-text-neutral-loud);*/
  background-color: var(--color--gray-10);
  background-image: none;
}

.ck-content *
{
  color: #F0F;
  background-color: #0F0;
}

/* dark background for preformatted text */
.text-content code, .text-content pre code, .cke_editable code.ck, .ck-editor__editable
{
  color: var(--color-text-neutral-loud);
  background-color: var(--color--gray-10);
}

..ck.ck-editor__main > .ck-editor__editable {
    background: #F00; /*var(--color--gray-10);*/
    border-radius: 0;
}

.ck-content .drupal-media > figcaption
{
  background-color: #F0F;  /*hsl(0, 0%, 5%);*/
}

.ck-reset, .ck-editor, .ck-editor__main div, .ck, .ck-content, .ck-editor__editable, .ck-rounded-corners, .ck-editor__editable_inline, .ck-blurred
{
  background-color: #F0F;  /*hsl(0, 0%, 5%);*/
  background-image: none;
  color: #F0F;  /*var(--color-text-neutral-loud);*/
}

:root
{
  /* Helper variables to avoid duplication in the colors. */
  --ck-custom-foreground: var(--color-text-neutral-medium);
  --ck-custom-background: var(--color-white);
  --ck-color-base-foreground: var(--color-text-neutral-medium);
  --ck-color-base-background: var(--color-white);
}

.node--view-mode-full .field--tags
{
  background-color: var(--color--gray-10);
}

Proposed resolution

???

CommentFileSizeAuthor
2023-04-17_11-02-16_drupal_ckeditor5_style2.png377.94 KBValkaTR
2023-04-17_11-01-35_drupal_ckeditor5_style1.png391.6 KBValkaTR

Comments

ValkaTR created an issue. See original summary.

djg_tram’s picture

djg_tram commented

Is your base-ckeditor5.css included in the first place? I had problems with it in a similar situation.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: CKEditor 5 background-color ignored? » CKEditor 5 background-color ignored in Olivero subtheme?
Component: ckeditor5.module » Olivero theme
Issue tags: +CSS

Looks like a cool thing you're trying to build there 🤩

Temporarily moving this to the Olivero component so @mherchel will hopefully provide feedback 🤓🤞

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Active » Closed (works as designed)

What's probably happening here is the CKEditor-default styles are occurring in a stylesheet that's applied after your styles. Because they are in the same context and have the same specificity, the last-defined value wins. You have a few options:

1. Change your selector. If you select an element further down the DOM like .ck-editor__main, you should be able to override the value of the css-variable, even without changing your specificity or context.

2. Alter the ck-editor library. You can use libraries-override to change the ck-editor library that gets attached for your theme.

3. Move your styles down in the cascade. Your styles are higher in the cascade, and are losing to styles lower in the cascade. You could add a weight to your stylesheet where those styles are defined between -50 and +50. Higher weights "sink" to the bottom, and lighter weights "float" to the top.

Closing this support request now, but feel free to re-open the ticket if needed.