Mantra Theme CKEditor 5 Styles

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);
}