[5.0] Add basic support for conditional dark mode themes in our editors

[wilsonge]

Pull Request for Issue #42148 and #41801 .

Summary of Changes

Supports dark mode detection for both tinymce and codemirror. Unlike the template which will actually flick over immediately once the OS is changed this will not change until the page is next reloaded. For codemirror this may be possible in the future as outlined in the todo in the code comment. But at the moment I don't believe this is possible for tinymce.

I've reused the same data attribute that @Fedik is suggesting in #42221 (but I still disagree with the concept of a toggle in that PR - but this doesn't block that or alter that PR in any way). But the data attribute will be required on the body element to support this

Testing Instructions

Open the editor in both light and dark modes. Before it would always open in light mode. Now it will match whatever the template is using on page load.

Note that casseopia which doesn't support automatic dark mode remains having editors only loaded in light mode.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org: Note dark mode support Manual#206

• [] No documentation changes for manual.joomla.org needed

[brianteeman]

I have tested this item ✅ successfully on 0069901

awesome!!!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42322.}

[MacJoom]

I have tested this item ✅ successfully on b8eb1b7

Tested on Firefox with a dark mode toggle extension

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42322.}

[viocassel]

I have tested this item ✅ successfully on b8eb1b7

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42322.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42322.}

[bembelimen]

Not sure if this is the way forward, when we want to have a color switch soon based on a data attribute with a different name? (Although the overall function looks good)

[Fedik]

It will be an adddittional atribute with the active color scheme name.
We just will be need to update this code to account it.

And data-color-scheme-os will stay, to indicate that the template will do switch automatically based on OS state.

[wilsonge]

As @Fedik says and as I put in the description this uses the same data attribute that he's using in his pull request to implement the switcher. So I don't understand why this is incompatible with adding the switcher even if I disagree with it.

[bembelimen]

Thx