Project
CKEditor 5 is now loaded without an iFrame, so it inherits the styles from the current theme.
mantra_theme.info.yml
ckeditor5-stylesheets:
- css/drupal/ckeditor5.css
ckeditor5.css
Override ck-color variables.
:root {
/* Focus, active, hover */
--ck-color-base-action: var(--accent-color, green) !important;
--ck-color-base-active: var(--accent-color, green) !important;
--ck-color-base-active-focus: var(--accent-color, green) !important;
--ck-color-base-focus: var(--accent-color, green) !important;
--ck-color-button-action-hover-background: var(--accent-color, green) !important;
--ck-color-button-action-active-background: var(--accent-color, green) !important;
--ck-color-button-action-active-shadow: var(--accent-color, green) !important;
--ck-color-switch-button-on-hover-background: var(--accent-color, green) !important;
--ck-color-focus-border: var(--accent-color, green) !important;
--ck-color-focus-outer-shadow: var(--accent-color, green) !important;
--ck-focus-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--accent-color, green) !important;);
--ck-color-button-on-color: var(--accent-color, green) !important;
--ck-color-button-on-background: var(--background-color, white) !important;
--ck-color-button-default-hover-background: var(--background-color, white) !important;
--ck-color-button-on-hover-background: var(--background-color, white) !important;
--ck-color-button-on-active-background: var(--background-color, white) !important;
/* Editor border */
--ck-color-base-border: var(--text-color, black) !important;
--ck-color-toolbar-border: var(--text-color, black) !important;
/* Other styles */
--ck-border-radius: 0 !important;
}
/* Formatted text filter help wrapper */
.filter-wrapper {
border-color: var(--text-color, black);
}