How to Add WaniKani to Dark Reader

For anyone unfamiliar with Dark Reader, it’s a browser extension that aims to automatically convert all websites you browse into dark mode. It works great and there are very few websites I run into that don’t work seamlessly.

However, WaniKani is one of those few websites. It works well for the most part, but the banner on lessons and reviews that specifies whether you need to enter the reading or the meaning isn’t color coded in Dark Readers palette.

To fix that, open Dark Reader > Dev Tools, then paste in the code below and hit apply.

================================

wanikani.com

CSS
#question-type.meaning {
    color: rgb(214, 209, 201) !important;
    background-image: linear-gradient(rgb(98, 98, 98), rgb(41, 44, 46)) !important;
}

================================

Feel free to tweak the colors to suit your preferences. Here’s how it looks with the code above.


If anyone has any other suggestions, or prefers a different style let me know. I’ll probably throw in a PR next week to see if they can merge this into master once I’ve got a style I’m happy with.