Contrib.social

CKEditor 5 background-color ignored in Olivero subtheme?

Open on Drupal.org →
Created on 17 April 2023, about 1 year ago
Updated 9 July 2023, 11 months ago

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.

/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

???

💬 Support request
Status

Closed: works as designed

Version

10.0 ✨

Component
Olivero  →

Last updated 3 days ago

Created by

🇪🇪Estonia ValkaTR

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 1 year ago →
    🇭🇺Hungary djg_tram

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

  • Comment about 1 year ago →
    🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

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

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

  • Status changed to Closed: works as designed 11 months ago
  • Comment 11 months ago →
    🇺🇸United States andy-blum Ohio, USA

    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.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024