Is there a straightforward way to override/disable the base theme's ckeditor5-stylesheets? Base theme's CKEditor5 stylesheet gets loaded by _ckeditor5_theme_css() regardless of my sub-theme's ckeditor5-stylesheets value.
I am using bootstrap5 as base theme. It has the following lines and seems to follow the instructions in Change record: New API for adding theme-specific styles in CKEditor 5 → .
ckeditor5-stylesheets: - css/ck5style.css
This issue happens in both D10 and D11 with any base theme that has CKEditor5 stylesheets.
The change record → above does not say anything about the expected behaviour regarding the base theme's CKEditor5 stylesheets. So, I'm not sure if this should be considered a feature request or a bug.
Workaround: Here is a workaround, but it would be easier to control this through sub-theme's ckeditor5-stylesheets value.
/**
* Implements hook_system_info_alter().
*/
function mymodule_system_info_alter(array &$info, Extension $file, $type) {
if ($type == 'theme' && $file->getName() == 'bootstrap5') {
$info['ckeditor5-stylesheets'] = FALSE;
}
}
0. Make sure ckeditor5 is installed.
1. Install a base theme that has ckeditor5-stylesheets value, for example
bootstrap5 →
.
composer require 'drupal/bootstrap5:^4.0' drush theme:install bootstrap5
2. Create a sub-theme. For bootstrap5, you can use the following command:
drush --include="web/themes/contrib/bootstrap5/src/Drush" bootstrap5:generate-subtheme my_subtheme --subtheme-name="My sub-theme"
3. Observe that our new sub-theme has the following lines and seems to follow the instructions in the change record → above:
... ckeditor5-stylesheets: - css/ck5style.css ... base theme: bootstrap5
4. Install the sub-theme and make it the default theme. Also, turn off CSS aggregation for easier testing and clear cache.
drush theme:install my_subtheme drush config-set system.theme default my_subtheme drush config-set system.performance css.preprocess 0 drush cr
5. Test through browser/drush:
5.a Test in browser: Go to /node/add/page and observe that CKEditor5 stylesheets are loaded for both base theme and sub-theme (for example, the /themes/contrib/bootstrap5/css/ck5style.css and /themes/custom/my_subtheme/css/ck5style.css).
5.b Check _ckeditor5_theme_css()'s output by executing the following drush command:
drush eval 'echo var_dump(_ckeditor5_theme_css());'
... and observe that CKEditor5 stylesheet of base theme still shows up in the output in addition to the sub-theme's:
array(2) {
[0]=>
string(43) "/themes/contrib/bootstrap5/css/ck5style.css"
[1]=>
string(48) "/themes/custom/my_subtheme/css/ck5style.css"
}
6. Now set ckeditor5-stylesheets to false in your sub-theme's .info.yml file:
... ckeditor5-stylesheets: false ... base theme: bootstrap5
7. Clear cache and repeat the step 5 above for testing:
7.a Test in browser: Observe that base theme's CKEditor5 stylesheet (for example, the /themes/contrib/bootstrap5/css/ck5style.css above) is loaded.
7.b Check _ckeditor5_theme_css()'s output using the following command:
drush eval 'echo var_dump(_ckeditor5_theme_css());'
and observe that the base theme's CKEditor5 stylesheet still shows up in the output:
array(1) {
[0]=>
string(43) "/themes/contrib/bootstrap5/css/ck5style.css"
}
Either of the following:
ckeditor5-stylesheets set (either false or actual CKEditor5 stylesheets). However, it may cause issues for existing sites that are intended to use CKEditor5 stylesheets from both base theme and the sub-theme.libraries-override.Active
11.0 🔥
Last updated
It is possible to use hook_library_info_alter() in a theme. There should be something similar for changing ckeditor5-stylesheets, perhaps something like hook_system_info_alter() (that does not currently work in a theme).
Updated issue summary to add all headings from template.
Noted the functionality and linked to this issue from the Sub-Theme inheritance → docs.