Font Color Issue in Text Area with Dark Mode

[jlucero2]

This was driving me crazy and I couldn't understand why it was happening. I thought it was just me, but after some creative googling, I found this stack overflow post that diagnosed the underlying cause exactly for me. Thought I would put it here in case anyone can figure out how to fix it, and also to increase visibility in case this was driving anyone else crazy as well.

https://stackoverflow.com/questions/72408854/django-ckeditor5field-field-default-font-color

Tl;dr - the issue is that when the browser is in dark mode, the text area editor makes the input font a light color, but fails to set the background to a dark color, so you get the effect that when you start typing, you are typing grey-white text into a white input box.

I'm using Firefox FWIW, haven't verified this in another browser.

It's not actually styling the text as gray-white, so when you publish, the text is black (or whatever default css color is set), but it was driving me crazy that every time I was writing in one, I had to explicitly set font color to black to see what I'm typing. So I've gotten much faster at toggling my browser in and out of dark mode.

[ivanBell199]

Django dark mode styles are applied to the CKEditor text color. This issue has been posted here before. It was suggested to create a custom CSS file to fix this problem. And this is what I do as well. 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;
}

[jsolly]

To get it working for me outside of the admin page (In the user-facing UI), I did this:

@media (prefers-color-scheme: dark) {
    .ck.ck-editor__main>.ck-editor__editable {
        color: #fff;
        background-color: #000;
    }
    .form-control {
        color: #fff;
    }
}

[jlucero2]

Thanks for sharing those solutions!

[Furrity]

I know it is a closed issue but could I get a response? I did all the things mentioned here and still it wont work for me. Header text is still grey.

Is there any way or I am sure to write my css config?

[jsolly]

@Furrity you gotta inspect the element and find the CSS style that is doing it and then override it.