Add night mode class in the editor

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>
<div>
  hello
</div>

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.

2 Likes

Created an issue for that:

3 Likes