Any way to enable dark mode detection?

[jonespm]

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]

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]

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.