Django - CKEditor5Field field default font color

Question

I've got 2 CKEditor5Fields in one of my models. I'm running into an issue in the admin panel that when the browser is in dark mode the background color of the field is staying white and the font color is changing to an off-white color making it really hard to read. The text is fine when it's rendered to the page. Is there a way to set the default font color to black so browser mode doesn't matter?

Light Mode:

Dark Mode :

Model properties:

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

My config:

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' }
            ]
        }
    }
}

Answer 1

Django dark mode styles are applied to the CKEditor text color. A possible solution is to use a custom CSS file. Here is my approach:

in the settings.py make sure you have these lines:

# 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',
]

Then create this CSS file in the root of the project:

staticfiles\css\ckeditor5\admin_dark_mode_fix.css

And add this fix:

.ck.ck-editor {
    color: black !important;
}