:root,
[data-theme='dark'] {}

:root {
    --ds-ck-background-color: #ffffff;
    --ds-ck-toolbar-background-color: #f8f9fa;
    --ds-ck-text-color: #212529;
    --ds-ck-opposite-text-color: #ffffff;
    --ds-ck-button-background-color: #f8f9fa;
    --ds-ck-button-hover-background-color: #e9ecef;
}

[data-theme='dark'] {
    --ds-ck-background-color: #212529;
    --ds-ck-toolbar-background-color: #343a40;
    --ds-ck-text-color: #ffffff;
    --ds-ck-opposite-text-color: #212529;
    --ds-ck-button-background-color: #343a40;
    --ds-ck-button-hover-background-color: #212529;
}

.ck.ck-editor__main>.ck-editor__editable {
    background-color: var(--ds-ck-background-color) !important;
}

.ck.ck-toolbar {
    background-color: var(--ds-ck-toolbar-background-color) !important;
}

.ck {
    color: var(--ds-ck-text-color) !important;
}

.ck .ck-button {
    color: var(--ds-ck-text-color) !important;
    background-color: var(--ds-ck-button-background-color) !important;
}

.ck .ck-button:hover {
    background-color: var(--ds-ck-button-hover-background-color) !important;
}