Selecting Night Mode should trigger `prefers-color-scheme: dark` so relevant CSS rules are applied

Anki Suggestions
1

Anki has a night mode. It even supports custom CSS rules using the class .night_mode. But there is a better way to do it:

The prefers-color-scheme media query is used to detect if the user has requested a light or dark color theme.

So I request the following feature:

When night mode is enabled prefers-color-scheme: dark should be triggered.

For a demonstration check this out:

In the options section you will see three options: Dark and Light but also an automatic mode which makes use of prefers-color-scheme. When is the system is in dark mode, the css will also load a dark color scheme.

5 Likes
2

This is still relevant. As a test, this should work out of the box:

p {
 color: red;
}

@media (prefers-color-scheme: dark) {
  p {
   color: blue;
  }
}
1 Like
3

I checked and couldn’t find a way to set prefers-color-scheme with QWebEngine. PySide6.QtWebEngineCore.QWebEngineSettings - Qt for Python