Cards visible night-mode desktop, but not night-mode mobile

AnkiDroid (Android) Help
1

Hi everyone,

I was wanting to use the Kanjidamage shared deck to further some japanese, however, both my desktop and mobile phone are in dark/night mode.

Initially, the deck was unreadable. It used various font colors, and the text that was black was unreadable in night mode.

This was fixed when I added a line in the card styling that read

.night-mode .cardcontainer { color: #fff; }

The previews for the cards improved and now readable in night mode on my desktop computer. I sync’d those changes, then synced ankidroid to receive the changes I made but the text remains just as unreadable. Is there something I am missing?

1 Like
2

This happens because, when syncing your collection, Anki doesn’t detect any changes in your media folder and therefore doesn’t push any updates to the server.

The only way I know of to invoke a full media synchronization is by adding or deleting a file, so every time you edit an existing asset, you’ll also need to modify the collection.media contents to force a media sync.

As an easy workaround, what I do is to simply rename a random unused file in my media folder, like foo.txt to fooo.txt (and viceversa) each time I want to push changes in my JS and CSS assets into my other devices.

3

I tried doing what you advised, but after ensuring there was a media sync, I saw no difference in how visible the card deck was in Ankidroid.

I then went to Ankidroid, and figured since the snippet of CSS was so short, I could just put it in myself via mobile. Took a bit of digging around but I eventually found the area in the mobile app that allows me to adjust the CSS. I found and recognized the CSS styling for the kanjidamage deck. I scrolled to the bottom and found the “.night-mode .cardcontainer { color: #fff; }” line already there. So now I am a little confused. That same line is what made the material visible on my desktop, but now I see that it’s already on my mobile device but the cards are still totally unreadable.

4

You might want to try the various names that night mode goes by – desktop seems to prefer nightMode – AnkiDroid seems to prefer night_mode.

Take a look at the examples on those pages of how to modify night mode styling, and especially –

  • Platform-specific CSS – Styling & HTML - Anki Manual .
  • Using filter: invert(100%); instead of specifying color-by-color – (see link above).
1 Like
5

The underscore was exactly what was needed. Everything is fixed now. Did not realize that there could be a difference between how nightmode may be referred to for desktop and Ankidroid.

6

I know there is an accepted answer already, but imo this should be handled with the same selector regardless of the platform in order to unify CSS declarations.

7

If the preferred selector for AnkiDroid and the preferred selector for Anki are supported on both platforms, I don’t think there’s an issue. We can certainly check with the devs (or anyone else who knows?) and make sure that’s the case.

It might be a dream for them to both prefer the same one, but we’re not going to ask them to drop support for the other one, because that will only hurt existing users and their note types that rely on what’s currently supported.

The issue here is using a different selector, and whether the platforms support it equally. It appears they do not.