Add night mode class in the editor

[abdnh]

This request is related to a report from 2020. There, the discussion ended by acknowledging the limitation. I believe it should be addressed.
Is your feature request related to a problem? Please describe.
Night mode class is not applied to HTML rendered in the editor. Anki supports light and dark modes for its GUI and things like rendered text but doesn’t propagate the night mode class to custom HTML rendered in the editor.
Try the following field in the dark mode. The background should be green, but you’ll see red.

<style> div { background-color: red } .nightMode div { background-color: green } .night-mode div { background-color: green } .night_mode div { background-color: green } </style>

hello

image662×1016 45.3 KB
Describe the solution you’d like
Have a night mode class get applied to the editable HTML when dark mode is on.
Describe alternatives you’ve considered
I’ve tried researching if I’m doing anything wrong but couldn’t find anything.
I encountered this while implementing a support for inline styles for my add-on.

Originally reported on https://forums.ankiweb.net/t/add-night-mode-class-in-the-editor/67885

Ideally, we'd also apply note type styles to make it match reviewer appearance. Refer to this old PR: #1049

[leedoughty]

I'm happy to look into this @abdnh

[abdnh]

If it's a quick fix, go for that! Otherwise, it makes sense to wait for #4029 to be merged.

[leedoughty]

Thank you, @abdnh. I’ve raised a PR for the dark mode fix: #4473. I’ll also look into applying note type styles to match the reviewer appearance, and will check if that's best to do now or wait for #4029 to be merged.