Styling doesn't work well with Night Mode add-on for macOS client

[tvanantwerp]

Without Night Mode:

With Night Mode:

This is with Anki for macOS version 2.1.15 and Night Mode plugin version 2.2.4.

[ruricolist]

The same problem exists on Windows, again with Anki 2.1.15 and Night Mode 2.2.4.

[aplaice]

I can reproduce the issue on Linux, with Anki 2.1.15, Night Mode 2.2.4.

As far as I can tell, there are two issues with the Night Mode styling of anki-ultimate-geography:

1. The info text overlaps with the main text.

2. The colour of the info text isn't inverted, so it's difficult to see.

I don't think that either of the issues is really the "fault" of anki-ultimate-geography.

---

To reproduce 1., with the Night Mode addon turned on, but without anki-ultimate-geography, (only with a lightly-edited standard card type), change the "Front Template" of a "Basic" card to:

<div id=answer>{{Front}}</div>
<div>overlapping text</div>

(obviously remember to keep back-ups of the Template).

To reproduce 2., again with the Night Mode addon, but without the anki-ultimate-geography deck, add the following to the "Styling" of a "Basic" card:

div {
 color: #333;
}

---

Looking at the issues filed against Anki-Night-Mode, I think that issue "2.", above, is the same as krassowski/Anki-Night-Mode#52.

In principle, anki-ultimate-geography could use the work-around mentioned there; i.e. we could add something like:

.night_mode .info, .night_mode .type {
  color: #ccc;
}

to the CSS.

However, I'm not sure whether it's worth it, and more importantly, it doesn't deal with the more significant problem of the overlap (1.).

(There's also the issue that Anki now has its own in-built night mode, which apparently uses the nightMode class, so for completeness, the following would also be needed:

.nightMode .info, .nightMode .type {
 color: #ccc;
}

)

(I don't actually use the Night Mode addon, so if you're interested in having these solved, please file issues there and/or follow them up.)

PS It's a shame that neither Anki, nor the addon uses the new prefers-color-scheme media selector...

[axelboc]

The overlapping issue is strange, especially knowing it happens even in the simplest of cases, as you've demonstrated @aplaice. There's no point in working around the colour issue until this is resolved.

That being said, if Anki has a built-in night mode, we should definitely support it! How does it compare to the add-on? Has anyone tried it? If all it does is put a nightMode class on the card, then it's easy-peasy.

[aplaice]

Is it worth supporting?

How does it compare to the add-on?

Unless I've completely missed something, Anki's built-in night mode isn't that great, as it seems to only switch the card area to dark mode, but not the UI as a whole:

OTOH to be fair, the relevant preferences toggle just says "Show cards as white on black (night mode)" so it does exactly what it says. Also, I think (though I'm not 100% sure) that by customising one's Qt theme system-wide one can switch the UI to dark mode, so in some sense it's logical for Anki's toggle to only change the html part.

Additionally, the same night-mode styling is used in Anki mobile (on iOS).

(The night mode on iOS is actually a "proper" night mode, with the entire UI also themed (or at least it was in version 2.0.48, which is the latest that my ancient not-really-used iOS device can support, but it's unlikely to have become worse...)

Like the built-in Anki desktop night mode and the add-on-enabled night mode, (and unlike Ankidroid) Anki mobile's dark mode does not automatically invert font colours other than pure black and white, so like them, it displays the info text as dark grey on black. (Or at least it didn't do automatic inversion in my old version. However, since the current Anki mobile manual still refers to customisable night mode styling, it's plausible that no automatic colour-inversion has been introduced.)

Hence, overall, it might be worth supporting Anki's built-in night mode.

Is it easy to support?

If all it does is put a nightMode class on the card,

Yes, that's all it does.

then it's easy-peasy.

Indeed. Using the above CSS snippet:

.nightMode .info, .nightMode .type {
 color: #ccc;
}

fixes the styling of the additional info text:

It similarly fixes the styling on (my old version of) Anki mobile. (I'm not attaching screenshots since I can't be bothered to figure out how to easily copy images from my iOS device, since I don't really use it (I only bought Anki on it to support Anki development and for occasional testing, like now :)).)

[axelboc]

Closing this with wontfix until krassowski/Anki-Night-Mode#87 is resolved. That being said, Anki's built-in dark mode is now supported thanks to @aplaice #173. 💯