_ckeditor5_theme_css() not called. ckeditor5-stylesheets not working

Please show us your code.

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?

Having the same issue here, using 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

Edit: It looks like 'stable' was appearing because that was somehow set as the base theme for my front-end theme. that being said, if I change that to false, I'm now getting CSS from my admin theme, which I have also set to not inject into CKE, but this is being ignored and the theme's CSS is being added anyway. If I inspect the $css variable at the bottom of_ckeditor5_theme_css(), it only shows my front-end theme, yet ckeditor is still using the admin theme. Perhaps this makes sense since the editor is being rendered on an admin page and not in an iframe, but surely there must be a way to disable this other than specifically telling your admin theme to exclude each and every single style from CKE divs?

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 they are unwanted, as well as front-end theme styles leaking onto the admin pages when we only want them 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 by 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 through sub-theme's .info.yml file? I just created an issue for that: Allow overriding/disabling base theme's ckeditor5-stylesheets value 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.

I also have this problem.