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

Project tree

root
  |--config
    |--settings.py
  |--static
    |--css
      |--ckeditor5
        |--admin_dark_mode_fix.css
  |--tepmlates
    |--admin
      |--base_site.html

configure settings "DIRS": [os.path.join(BASE_DIR, 'templates')] and STATIC in config/settings.py

config/settings.py


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],    # <--- here
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages'
            ],
        },
    },
]

# and here
STATIC_URL = "/static/"
if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
else:
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

rewrite css styles

static/css/ckeditor5/admin_dark_mode_fix.css


.ck p,
 .ck h1,
  .ck h2,
   .ck h3,
    .ck ul {
    color: black !important;
}

rewrite admin template

templates/admin/base_site.html


{% extends "admin/base.html" %}
{% load static %}

{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'css/ckeditor5/admin_dark_mode_fix.css' %}">
{% endblock %}

{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{% endblock %}

{% block nav-global %}{% endblock %}

Answer 2

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