Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any way to enable dark mode detection? #375

Open
jonespm opened this issue Nov 3, 2021 · 2 comments
Open

Any way to enable dark mode detection? #375

jonespm opened this issue Nov 3, 2021 · 2 comments

Comments

@jonespm
Copy link

jonespm commented Nov 3, 2021

I saw on this document that there is a way to detect dark mode in javascript and apply a specific skin and content_css.
https://www.tiny.cloud/blog/dark-mode-tinymce-rich-text-editor/

skin: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "oxide-dark" : ""),
content_css: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "")

I'm not sure how to do it as part of this package since it only takes a dict and doesn't seem to process the values client-side. Is there some easy pattern I'm missing or maybe just a way to have it pass these dark mode detection values to the init?

@claudep
Copy link
Contributor

claudep commented Apr 23, 2022

I think it would be acceptable to use those code lines in our own initTinyMCE JS function, provided that no other skin or content_css value is present in the default config. Would you try to prepare a patch with this idea?

@some1ataplace
Copy link

some1ataplace commented Dec 10, 2022

I am guessing this is the file and function that you are suggesting we change:

https://github.com/jazzband/django-tinymce/blob/master/tinymce/static/django_tinymce/init_tinymce.js

Something like this?

tinyMCE.init({
  selector: 'textarea',
  skin: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "oxide-dark" : ""),
  content_css: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : ""),
  // ... other options ...
});

In this example, we're adding the skin and content_css options to the default configuration object passed to the tinyMCE.init() function. The skin option sets the skin to use for the editor, based on the user's preferred color scheme (oxide-dark for dark mode, and the default skin for light mode). The content_css option sets the CSS file to use for styling the contents of the editor, also based on the user's preferred color scheme (dark for dark mode, and the default CSS file for light mode).

Note that if you're using a custom configuration object instead of the default one, you'll need to add these options to your own configuration object instead.

We might be able to use code from SilviaAmAm's connected PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants