ckeditor
Next.js installation snippets result in white-on-white text if using system-wide dark mode
📝 Provide a description of requested docs changes
What is the purpose and what should be changed?
Current Next.js installation instruction might result in the white text on a white background if the user is using system-wide dark mode and the project is set up with create-next-app and snippets from https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/getting-started/installation/next-js.html
It results from default global CSS rules in globals.css generated when creating a next.js project, specifically - foreground-rgb: 255, 255, 255 in globals.css:45.
It is mentioned in the docs at the end of the guide that this could happen, but it’s easy to be overlooked. We could consider adding some dedicated styling to the snippets so they will work in the dark mode by default.
Dark mode is a hard topic for us, and unfortunately it's not the solution we could quickly apply here. We would need to fix it on the docs level.
I'm more and more inclined into adding some very basic font styles into the editor styles.
This is, in fact, necessary anyway if we were to also ship a dark theme. So we may need to do it anyway.
This would need to be marked as major BC, but most likely obvious for integrators to "migrate to".
I'm hesitant about adding major BCs to v42, to decrease the splash zone and the feeling "Oh, they do something major and something broke on my side". We have no majors right now, and I'm happy about it. TBD.
Potential solution: more specific background selector (now white) that only applies to light themes?
Note: As long as we don't have a ready-to-use dark theme for CKE5, the interface of CKE5 will be light even though the page in which it's embedded may be running a dark theme.
Therefore, the default style of text in the editor content should be aligned to the style of the editor interface: light background and dark text.
Hi everyone, I spent a lot of time searching for dark and light mode props or any other solutions for CKEditor, but I couldn't find a proper answer. So, I came up with an alternative way to fix this issue in my Next.js project. You can check out the solution here. I’m sharing this to save other developers time and effort!
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).