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.

8 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;
  }
}
2 Likes
3

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

4

I’ll second this, with prefers-color-scheme working, we can define color like this

:root {
  color-scheme: light dark;
}

p {
  light-dark(red, blue);
}

This is much much more efficent, and already work on ankidroid.

Since prefers-color-scheme is widely available on all modern browser now, this maybe eay to set.

1 Like
5

Edit (due to a post merge), this seems to be a bug, not a feature suggestion; as AnkiMobile/AnkiDroid works.

Description

The prefers-color-scheme CSS media query correctly detects light, but fails to detect dark mode on Anki Desktop. When switching Anki’s built-in dark mode, styles using prefers-color-scheme: dark do not apply correctly.

This issue does not occur on AnkiMobile or AnkiDroid.

Steps to Reproduce

  1. Open Anki Desktop (tested on macOS).

  2. Ensure the system theme is set to Light Mode.

  3. Apply the following CSS in the styling section:

    @media (prefers-color-scheme: light) {
  body {
    background: white !important;
    color: blue;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: black !important;
    color: blue;
  }
}

  4. The background correctly switches to white in Light Mode.

  5. Now switch Anki Desktop to Dark Mode.

  6. The background remains white instead of switching to black.

Expected Behavior

When Anki Desktop is set to Dark Mode, prefers-color-scheme: dark should return true, and the page should apply dark mode styles (background: black).

Actual Behavior

  • prefers-color-scheme: light works correctly when the system is in Light Mode.
  • prefers-color-scheme: dark is never detected, even when Anki is switched to Dark Mode.
  • The background remains white instead of switching to black.

Tested On

  • OS: macOS 15.3.1

  • Anki Desktop:

    • Version: ⁨24.11 (87ccd24e)⁩
    • Python 3.9.18 / Qt 6.6.2 / PyQt 6.6.1

  • AnkiDroid:

    • Version: 2.20.1 (December 23, 2024)
    • Backend: anki 24.11 / c47638ca

  • AnkiMobile:

    • Version: 25.02.2

  • DevTools Testing:

    • Manually toggling prefers-color-scheme in Chrome DevTools shows that light is detected, but dark is ignored.

Additional Notes

  • This issue only occurs on Anki Desktop.

  • Running this JavaScript test:

    console.log(window.matchMedia('(prefers-color-scheme: dark)').matches);
console.log(window.matchMedia('(prefers-color-scheme: light)').matches);
    • Expected Output:
      • true for dark mode when enabled.
      • false for light mode when dark mode is enabled.
    • Actual Output:
      • false for dark mode, even when enabled.
      • true for light mode, even when Anki is set to Dark Mode.

Possible Causes & Debugging

  • This may be related to how Anki applies .night-mode styling.
  • A possible fix could be ensuring that Anki’s dark mode also updates the system’s reported theme preference
2 Likes
6

Edit: Now irrelevant because Danika_Dakika merged the two topics.

1 Like
7

I’m not familiar with Qt, so I’m not sure why our color scheme is not passing down to our webview.

Since Qt 6.5, color scheme detection seems to be supported, so in theme.py, some helper functions could just be replaced, i.e. get_windows_dark_mode(), get_macos_dark_mode(), get_linux_dark_mode()…

QGuiApplication.styleHints().colorScheme() allows us to check the system’s color scheme, but we cannot modify it (until Qt 6.8?)

Constant Value Description
Qt::ColorScheme::Unknown 0 The appearance is unknown.
Qt::ColorScheme::Light 1 The background colors are lighter than the text color (Light theme).
Qt::ColorScheme::Dark 2 The background colors are darker than the text color (Dark theme).

In Qt 6.8, we seem to have setColorScheme as a method:

8

I think BartL (the person above) made some changes in December. Is this an issue with Anki desktop 25.02 version? I see you only tested on 24.11 ver.

1 Like
9

Thanks for the heads-up. I updated to 25.02 – issue still persists.

console.log("dark-theme: ", window.matchMedia(‘(prefers-color-scheme: dark)’).matches);
console.log("light-theme: ", window.matchMedia(‘(prefers-color-scheme: light)’).matches);

Same results.

1 Like
10

This should be fixed in Qt 6.7 according to [Qt 6.7] Set ForceDarkMode attribute in AnkiWebView by louwers · Pull Request #3622 · ankitects/anki · GitHub

Anki is still on Qt 6.6 due to regressions in recent releases: Revert "Qt 6.8.1" · ankitects/anki@cd18241 · GitHub

4 Likes