Django - Цвет шрифта поля CKEditor5Field по умолчанию

В одной из моих моделей есть 2 поля CKEditor5Fields. Я столкнулся с проблемой в панели администратора, что когда браузер находится в темном режиме, цвет фона поля остается белым, а цвет шрифта меняется на небелый, что делает его очень трудночитаемым. При выводе текста на страницу все нормально. Есть ли способ установить черный цвет шрифта по умолчанию, чтобы режим браузера не имел значения?

Режим освещения:

enter image description here

Темный режим :

enter image description here

Свойства модели: 

property_short_description = CKEditor5Field('property short description', config_name='extends', blank = True, null = True)
description = CKEditor5Field('description', config_name='extends')

Моя конфигурация: 

CKEDITOR_5_CONFIGS = {
    'default': {
        'toolbar': ['heading', '|', 'bold', 'italic', 'link',
                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
    },
    'extends': {
        'blockToolbar': [
            'paragraph', 'heading1', 'heading2', 'heading3',
            '|',
            'bulletedList', 'numberedList',
            '|',
            'blockQuote', 'imageUpload'
        ],
        'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
        'code','subscript', 'superscript', 'highlight', '|', 'codeBlock',
                    'bulletedList', 'numberedList', 'todoList', '|',  'blockQuote', 'imageUpload', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                    'insertTable',],

        'image': {
            'toolbar': ['imageTextAlternative', 'imageTitle', '|', 'imageStyle:alignLeft', 'imageStyle:full',
                        'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],
            'styles': [
                'full',
                'side',
                'alignLeft',
                'alignRight',
                'alignCenter',]
            },
        'table': {
            'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
            'tableProperties', 'tableCellProperties' ],
            'tableProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            },
            'tableCellProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            }
        },
        'heading' : {
            'options': [
                { 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
                { 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
                { 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
                { 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }
            ]
        }
    }
}

Стили темного режима Django применяются к цвету текста CKEditor. Возможным решением является использование пользовательского CSS-файла. Вот мой подход:

в settings.py убедитесь, что у вас есть эти строки:

# path to the custom CSS file
CKEDITOR_5_CUSTOM_CSS = 'css/ckeditor5/admin_dark_mode_fix.css'

# I don't know why but if I put the CSS file in the STATIC_ROOT folder, the styles are not applied.
# So I use a custom static folder
STATICFILES_DIRS = [
    BASE_DIR / 'staticfiles',
]

Затем создайте этот CSS-файл в корне проекта:

staticfiles\css\ckeditor5\admin_dark_mode_fix.css

И добавьте это исправление: 

.ck.ck-editor {
    color: black !important;
}
Вернуться на верх