_ckeditor5_theme_css() not called. ckeditor5-stylesheets not working

Please show us your code.

This is the info.yml file of the default theme (built from a copy of Olivero). I am using Gin as the admin theme.

name: PipCoders
type: theme
base theme: false
description: 'A clean, accessible, and flexible Drupal front-end theme.'
alt text: 'Screenshot of PipCoders, Drupal front-end theme.'
core_version_requirement: ^10
version: VERSION
libraries:
- pipcoders/global-styling
- pipcoders/landing_page_layout
- pipcoders/scroll_mouse
regions:
top: 'Top'
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
hero: 'Hero (full width)'
highlighted: 'Highlighted'
breadcrumb: 'Breadcrumb'
content_above: 'Content Above'
content: 'Content'
sidebar: 'Sidebar'
content_below: 'Content Below'
footer_top: 'Footer Top'
footer_bottom: 'Footer Bottom'
libraries-override:
system/admin:
css:
theme:
css/system.admin.css: false
system/base:
css:
component:
css/components/ajax-progress.module.css: css/components/ajax-progress.module.css
css/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css
core/drupal.checkbox: false
core/drupal.dropbutton:
css:
component:
misc/dropbutton/dropbutton.css: css/components/dropbutton.css
core/drupal.vertical-tabs:
css:
component:
misc/vertical-tabs.css: css/components/vertical-tabs.css
media/oembed.formatter: false
libraries-extend:
core/drupal.message:
- pipcoders/drupal.message
core/drupal.collapse:
- pipcoders/details
core/drupal.dialog:
- pipcoders/drupal.dialog
core/drupal.progress:
- pipcoders/progress
node/drupal.node.preview:
- pipcoders/drupal.node.preview
content_moderation/content_moderation:
- pipcoders/content_moderation

ckeditor5-stylesheets:
- css/base/variables.css
- css/base/fonts.css
- css/base/base.css
- css/ckeditor/embedded-media.css
- css/custom/google-reviews-hero.css
- css/custom/home-page.css
- css/custom/site-colors.css

I followed these docs https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito... →

I also added the ckeditor5-stylesheets: to the info.yml of the core Olivero theme and set that as default. This was an attempt to see if I had messed up something with my customized theme, but still no joy.

On the page where you're expecting css/custom/google-reviews-hero.css to be loaded, can you please evaluate drupalSettings.ajaxPageState.theme in the console? What value does that return?

"theme": "gin",

Below is the drupalSettings.ajaxPageState output.

{
    "libraries": "admin_toolbar/toolbar.tree,admin_toolbar/toolbar.tree.hoverintent,admin_toolbar_tools/toolbar.icon,big_pipe/big_pipe,claro/drupal.nav-tabs,claro/global-styling,claro/node-form,contextual/drupal.contextual-links,contextual/drupal.contextual-toolbar,core/drupal.active-link,core/drupal.collapse,core/drupal.entity-form,core/drupal.form,core/drupal.message,core/drupal.states,core/drupal.tableresponsive,core/internal.jquery.form,core/normalize,devel/devel-toolbar,gin/edit_form,gin/gin,gin/gin_accent,gin/gin_base,gin/gin_custom_css,gin/gin_horizontal_toolbar,gin/gin_init,gin/sidebar,gin/sticky,layout_paragraphs/builder,length_indicator/length_indicator,media/filter.caption,media_library/widget,menu_ui/drupal.menu_ui,mercury_editor/me_dialog,mercury_editor/mercury_editor,mercury_editor_iframe/iframe_parent,mercury_editor_style_options/style_options,node/drupal.node,node/form,paragraphs/drupal.paragraphs.unpublished,path/drupal.path,pathauto/widget,pip_custom_blocks/google_reviews_carousel,pip_zigzag/pip_zigzag,pipcoders/landing_page_layout,pipcoders/landing_page_layout_ckeditor,redirect/drupal.redirect.admin,shortcut/drupal.shortcut,system/admin,system/base,token/token,toolbar/toolbar,toolbar/toolbar.escapeAdmin,tour/tour,user/drupal.user.icons",
    "theme": "gin",
    "theme_token": "X5y22J_F2wkTcicm3_xth9hMOxd2kst3OvobpkwSJGE"
}

Having the same issue here, using a Claro for the administration theme, with a custom front-end theme:

Custom theme info.yml:

name: Custom Theme
description: Custom Drupal theme that utilizes Tailwind CSS.
type: theme
core_version_requirement: ^9 || ^10
base theme: false
screenshot: screenshot.png
components:
  namespaces:
    theme: theme/templates
    svgs: theme/assets/media/svgs
libraries:
  - fire/styles
  - fire/scripts
ckeditor5_stylesheets:
  - dist/ck.css
regions:
  search: 'Search'
  breadcrumb: 'Breadcrumb'
  content: 'Main Content'
  call_to_action: 'Call to Action'

Output of drupalSettings.ajaxPageState.theme when trying to add or edit a piece of content:

"theme": "claro"

Output of drupalSettings.ajaxPageState on the same page:

Object { libraries: "acquia_connector/acquia_connector.icons,admin_toolbar/toolbar.tree,admin_toolbar/toolbar.tree.hoverintent,admin_toolbar_tools/toolbar.icon,big_pipe/big_pipe,ckeditor5/internal.drupal.ckeditor5,ckeditor5/internal.drupal.ckeditor5.codeBlock,ckeditor5/internal.drupal.ckeditor5.emphasis,ckeditor5/internal.drupal.ckeditor5.htmlEngine,ckeditor5/internal.drupal.ckeditor5.media,ckeditor5/internal.drupal.ckeditor5.mediaAlign,claro/drupal.nav-tabs,claro/global-styling,claro/node-form,core/ckeditor5.alignment,core/ckeditor5.basic,core/ckeditor5.blockquote,core/ckeditor5.essentials,core/ckeditor5.htmlSupport,core/ckeditor5.link,core/ckeditor5.list,core/ckeditor5.pasteFromOffice,core/ckeditor5.removeFormat,core/ckeditor5.sourceEditing,core/ckeditor5.style,core/ckeditor5.table,core/drupal.active-link,core/drupal.autocomplete,core/drupal.collapse,core/drupal.dropbutton,core/drupal.entity-form,core/drupal.form,core/drupal.states,core/drupal.tabledrag,core/drupal.tableresponsive,core/internal.jquery.form,core/normalize,devel/devel-toolbar,editor/drupal.editor,editor/drupal.editor.dialog,field_group/core,field_group/element.horizontal_tabs,field_group/formatter.details,field_group/formatter.html_element,field_group/formatter.tabs,filter/drupal.filter,fire_admin/fire-admin-toolbar-icon,fire_admin_toggle/fire-admin-toggle,media_library/widget,menu_ui/drupal.menu_ui,miniorange_saml/miniorange_saml.admin,node/drupal.node,node/form,paragraphs/drupal.paragraphs.actions,paragraphs/drupal.paragraphs.admin,paragraphs/drupal.paragraphs.widget,path/drupal.path,pathauto/widget,pfw_user/pfw-user-menu-icon,redirect/drupal.redirect.admin,scheduler/vertical-tabs,shortcut/drupal.shortcut,system/admin,system/base,token/token,toolbar/toolbar,toolbar/toolbar.escapeAdmin,tour/tour,user/drupal.user.icons", theme: "claro", theme_token: "Vt00801q96CIMGitYnSOYh-PsauyPc947Tvz8pMPW1s" }

Are there any updates on this issue?
I am having the same problem.

I am running into a similar issue on 9.5.11. I am getting my admin theme's CSS in CKE, which I do not want, and it seems that the intended way to disable this is to add the following to your admin theme's info.yml file:

ckeditor5-stylesheets: false

This does not work for me. When I go into ckeditor5.module and debug _ckeditor5_theme_css() to figure out why this is happening, it looks like the 'stable' theme is being injected into the $info variable, which per the code should only happen if the $theme variable is not set. I am not finding any documentation about this, but there should definitely be away to easily disable admin theme CSS within the editor

I am having the same issue using Claro as base theme for the administration with a custom theme.

I'd say the implementation of ckeditor5-related stylesheets is a major issue right now. On top of not working at all for some people, we are also dealing with admin theme styles leaking into the editor when the are unwanted, as well as front-end theme styles leaking onto the admin pages when we only want it in the editor. If this is a natural consequence of doing away with iframes, is there a way to solve these issues so this all works the way it did before ckeditor5? If not, that is a major problem.

Also, the version was recently changed to 11.x, but this seems to be affecting 9 and 10 as well, basically anything using ckeditor5.

Yup but any fix will be against 11.x then backported, right?

I've definitely noticed Claro blockquote styling leaks into the editor. Annoying.

Hello,
It is possible to load the css with a hook :

/**
 * Implements hook_library_info_alter().
 */
function mymodule_library_info_alter(array &$libraries, $extension) {
  if ($extension === 'ckeditor5' && isset($libraries['internal.drupal.ckeditor5'])) {
    $libraries['internal.drupal.ckeditor5']['dependencies'][] = 'mymodule/ckeditor5_stylesheets';
  }
}

This change record → was helpful in getting the in-editor themes mostly worked out, particularly the second row in the table, but requires some trial and error, depending on your theme and design system. This has allowed me to work out most of my issues with getting the front-end styles into the editor. The key for me was creating a separate scss file for ckeditor and telling my gulpfile that I now have two main sources. I don't love that this seems to effectively double to size of my CSS assets, but in theory only one set is loaded at a time if you are using a separate admin theme.

The problem still remains that some admin theme styles still appear within the editor. I've found that across themes, button styles are the most problematic, as they always seem to override my front-end styles. This can be worked around but overriding some button CSS in your front-end theme, and this may work for other elements as well. I still think it's problematic that this is necessary in the first place, but I'm not sure what the solution to that particular problem is.

I am using libraries-extend and it is working for me.

libraries-extend:
  core/ckeditor5:
    - <theme>/<library>

@chrisgross

1. Did you manage to disable base theme's ckeditor5-stylesheets? I just created an issue for that: Allow overriding/disabling base theme's ckeditor5-stylesheets value ✨ Allow overriding/disabling base theme's ckeditor5-stylesheets value Active which also includes a workaround.

2. You may already know this, just in case you don't: one way to prevent admin theme's CSS in CKEditor5 is to turn off the "Use the administration theme when editing or creating content" option in /admin/appearance. But this doesn't help for when the admin theme is preferred in the edit pages.