The famous Dark Reader extension is available as a single JavaScript file on NPM (for some reason I cannot include a link here…), and I have successfully integrated it into one of my apps that uses a WebView to render HTML content. Naively speaking, since Anki also uses a sort of web engine to render HTML, is it possible to integrate Dark Reader?
Chrome: https://www.howtogeek.com/446198/how-to-force-dark-mode-on-every-website-in-google-chrome/
All the others browsers: https://www.androidpolice.com/2020/07/18/the-best-android-browsers-with-dark-mode/
in Firefox, you can install the dark reader extension
In Brave the option is displayed in appearance
Safari have extension as well (didn’t know it was possible, W safari): How to Force Websites to Enable Dark Mode in Safari on iPhone in iOS 17 - GeekChamp
I mean, I would like to get Dark Reader working inside Anki’s desktop app, not in a browser.
Anki have Dark mode since a long time by now, update to latest release
There are some add-ons which can change the CSS of anki such as
Yes, I am using the latest version, but Dark Reader has far better dark mode support: it calculates the colours dynamically.
Again I think static CSS rules are inferior to Dark Reader, which makes no assumption about the existing colours.
Edit: a screenshot clarifies what I mean:
Note the dark blue colour is hard to read, whereas on AnkiWeb with Dark Reader:
I see, this can be interesting to add +1
Again I think static CSS rules are inferior to Dark Reader, which makes no assumption about the existing colours.
Can you explain this more? The screenshot doesn’t clarify this to me because links are among the most trivial things to fix with custom night-mode CSS. I e.g. use the following:
.nightMode a {
color: #749ed6
}
.nightMode a:hover {
color:#6289bd
}
I have this in an _anki_base.css in my Anki collection.media and import this in all my note styles via @import url("_anki_base.css");. Compared to a website the range of content shown in typical Anki cards is relatively narrow and predictable, so I found that a custom CSS works very well where I’m not happy with the default Anki night-mode colors. I don’t see much to gain from dynamic rules for most simple cards like text with links. Improving the defaults for night-mode might already go a long way for those.
Dynamic rules from DarkReader might be useful for very complex html content. Maybe it could help better inverting images and e.g. having a dark-mode image-occlusion.
Anyway, personally I would be fine with DarkReader if it doesn’t mess with custom night-mode CSS.
A bit off-topic, but AnkiDroid seems to handle colors differently in night-mode than desktop Anki, e.g. it inverts some colors in night-mode. Maybe it’s already doing something similar do DarkMode? Or it just includes some more opinionated night-mode CSS. I just disabled the AnkiDroid behavior by setting .night_mode {}, which is an advice I found somewhere online…
They are not links… The raw HTML is
<span style="color: mediumblue;"><b>palavra de honra</b></span>
This could be fixed with CSS if you know mediumblue is used in some card, but not if you don’t know what colours are used in advance.
I myself don’t know if Dark Reader could handle images.
I think Dark Reader could be made an option since most users don’t have to deal with complex styles.
So the card contains inline color CSS. I would be very confused if I set the color of some text snippet explicitly to a specific color definition but when I preview the card it gets shown in a different color. This has happened to me when I was learning color-words in a foreign language and made the text e.g. pink with white background using the mini-format-pack addon. I was a bit annoyed that the pink was suddenly green in AnkiDroid, until I disabled its custom night-mode CSS with the trick above.
This could be fixed with CSS if you know
mediumblueis used in some card, but not if you don’t know what colours are used in advance.
This is mostly a non-issue if you create your own cards. I know which card is used where because I am the one setting the color to a specific value. If I want to use the color for a semantic purpose like emphasis, then I would create a custom CSS class with light- and dark-mode values.
But I see your point where a dynamic inline-color-changes for dark-mode might be useful. E.g. if you use a shared deck with many custom inline colors and it was designed for light-mode. Or even if you yourself created a deck like this while using light-mode and later decide to switch to dark-mode and suddenly your cards are unreadable. Also most users are not web-devs and might use inline-colors for semantic purposes where you don’t care when it changes in dark-mode.
I’m wondering if it’s possible to define separate light- and darkmode colors inline… But this kind of thing could be supported if Anki had a built-in color-picker. But currently changing colors is only done by extensions or if you know HTML/CSS. So it’s not something Anki has strong built-in support for anyway. If you decide to edit HTML/CSS to add colors to cards, you should also be able to read the manual about CSS and learn how to use .nightMode classes imo.
Yes, simply append the following code to the Front template of your cards.
<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.67/darkreader.min.js"></script>
<script>
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
</script>
You could add it to the card templates for your default card types, or clone a card type and append “DarkReader” to the card type name to have a separate card type for it.
Here’s my test note.
And here’s what the Front template looks like for my test.
3 Likes
Thanks! I didn’t know you could put <script> tags right there. Now the only thing that remains is to somehow reads the Anki light/dark setting and pass it into the inline script…
When I create my own cards from scratch I am too lazy to use any styling… But most of my ~9000 cards are created by pasting definition generated by GoldenDict and look like this:
<div><span style="color: rgb(0, 139, 139); background-color: rgb(255, 255, 255);">[əˈsɜːbɪk]</span><font color="orange"><br></font></div><div><font color="orange">adjective</font>
And yes I create my cards in light mode, but later study in dark mode. If my memory serves me correctly, I started doing so when I discovered that AnkiDroid’s dark mode is different from that of the desktop version, as you have mentioned, and cards created in dark mode would have display problems.
@dae might know of a more reliable way to do this, but you can check if the nightMode class is applied to the body tag of the card. The updated JavaScript that you’d append to the template is as follows.
<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.67/darkreader.min.js"></script>
<script>
if (document.body.classList.contains("nightMode")) {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
}
</script>
I was able to figure this out with the AnkiWebView plugin which I just learned about.
2 Likes
Ah now I see where your problem comes from, I forgot about the option of just pasting HTML.
Personally for vocabulary I use different field with different CSS styles for each fields. E.g. you could have a separate field for the phonetics like [əˈsɜːbɪk] and a separate field for the word-type (e.g. adjective), as those are separate pieces of information. This makes it the easy customizing how the cards look globally by editing the card templates. But I admit just pasting rich definitions is faster for creating cards and thus productivity, I can also get behind that. Glad you found a solution. Not sure if that’s something that should be by default in Anki, but glad that it’s possible 
Yeah, these rich definition texts are generated from DSL dictionaries, which do not have many semantic tags, unlike XDXF.
Perhaps I should turn this into an Anki add-on.
Thanks to your guys for help! Much appreciated.
1 Like