[Userstyle] WaniKani Elementary Dark

What is WaniKani Elementary Dark:

WaniKani Elementary Dark, or WKED for short, is a dark theme for the wanikani domain with a modular approach and user customizability in mind.

Preview Images

Install the theme directly to Stylus here

*You can get Stylus here for chrome or here for firefox

You can also check the project out on GIT or userstyle.world

Customize the Look:

Is the default look not for you? No worries, you can easily change it!
All you need to do is copy a custom props sheet into Stylus and change the colors / filters as you see fit.
You can find a step-by-step guide on GIT.

Alternative looks:

@Rrwrex's color scheme

Get it here


Userscripts are great for enhancing your wanikani experience, but also a pain to work around when it comes to theming. So to solve this issue, the main WKED theme can be expanded upon, by loading in additional userscript specific modules, which will dynamically synchronize their color palettes.

Currently available modules:

Self-study Quiz

Install on Stylus

Find out more about the script

Stroke Order Diagram

Install on Stylus

Find out more about the script

Ultimate Timeline

Install on Stylus

Find out more about the script

Niai Visually Similar Kanji

Install on Stylus

Find out more about the script

Huge thanks to @Rrwrex for doing a lot of the heavy lifting on this project.


Ooooh! Fresh meat!


It’s nice to have an alternative to breeze dark. Thank you.

Nicely done! Hover effects and everything. It seems to play well with everything I use at first glance, except for the ultimate timeline plugin. All of the official pages I’ve looked at this far look great (including the radical/kanji/vocabulary summary pages which were a problem with breeze dark for a while).

Ultimate timeline with Elementary Dark:

Ultimate timeline with Breeze Dark:

Note the text icons in upper left, too.

Not a single !important – you’re my hero!

One thing that would be really nice if you’re willing would be to use custom properties for all the unique rgb values:

/* Top of file */
body {
--radical-color: #9d4745
--kanji-color: #56638a
--vocab-color:  #58b09c
--extra-color: #d7af70

.progress-entry .radical-icon, section.srs-progress ul li:first-child, .navigation-shortcut a span,
    .popover.srs .popover-content ul li:first-child {
        background: var(--radical-color);


Holy, thats a bunch of feedback way sooner than I expected, thanks! I’m glad most of it works, I was a bit worried, since I never shared any css amalgamations of mine before.

I myself don’t use any plugins atm, so I knew going in, the compatibility would be iffy, but I could take a look at it tommorow morning. If there are others that misbehave add them to the list and I will go through them.

Custom colors are a neat idea, I will definitely do that as some point in the future, not sure when tho.


Heh. No good deed goes unpunished.

I never got why people were so pushy about dark themes until I started using them myself. Now a sudden light theme page is an assault on my senses — it’s physically painful!

Dark theme is important. Breeze Dark has been working well enough for me lately, but I will definitely try Elementary Dark for a while.

Any theme is going to be a bit brittle (WK changes things – for the better – on occasion) but this looks extremely promising.

Do you have this in github? I’m going to hack on it a bit and would be happy to submit a PR.

NVM – it’s in the header!


Is that like starting to wear sunglasses to look cool, and then eventually you find that you are a vampire who is allergic to sunlight? :grin:


Looks pretty damn cool. As a fan of the bunpro dark mode I approve :smiley:

One thing I would like to request is a slightly more differentiated coloring during reviews:

I usually speed through easier reviews and start typing reading or meaning already simply based on color muscle memory. The script makes the coloring pretty similar so that on reflex I already typed out half the meaning when I have to dial it back because it wants the reading and vice versa

1 Like

Just pushed out a theming solution for that particular plugin, hope you like it


Did I swap the meaning and reading background colors? Oh no D:
As far as I can tell the meaning/reading colors are the same as in the default wanikani theme. But I could add the option to swap them around or potentially choose entirely different colors. For now I will add it to the issue pile.

Oh you are probably comparing it to breeze. Indeed it has reading distinguished by lighter shade of gray compare to meaning. I will add an option to invert the colors later today.

Just pushed out version 1.0.4, you should be able to change the colors of reading/meaning headers in quizes by altering one or more of the following variables at the top of the file


It might still need some changes to work in lessons, but as I dont currently have any. I have no way of checking for compatibility there.

Example of an altered look:


1 Like

I love it! Another for the issue pile (the background-color was originally #fff):

This is the self-study script: [Userscript] Self-Study Quiz


Probably some of mine global formating is clashing with the script. I will take a look at it.


Thanks for the response and effort again :+1:

1 Like

Aaa, your work is just amazing, a spectacular alternative for Breeze Dark. Not to mention for some reason Breeze Dark just looked a bit distorted and a bit buggy, Elementary Dark actually works for me perfectly.

Thank you so much for your time in this Style, and good luck with those reviews :hugs:


Thanks for providing an alternative to Breeze Dark. I will give it a go. I’m very used to Breeze Dark’s theme and even its quirks at this point, though. The screenshots from Elementary Dark look slick (and sick). :crabigator:

1 Like

As I suspected, I was way too lenient with some of the selectors. In this case the script was picking up on a generic input[type="text"] style. For now I made the selector in question more strict, so it should be usable with the current version 1.0.5.

Unfortunately some elements are still picking up on what they shouldn’t. I need to go through the stylesheet and remove most, preferably all, of these generic selectors.


But that is an issue for another day. Hope this partial fix at least suffice for now

1 Like

You previously said that you don’t really work with any userscripts installed, but I think the Stroke Order userscript is a widely used add-on, so I just wanted to give some feedback. If you think it’s worth your time, then I think it’d be amazing to make this look actually readable!


I will add it to the issues.
It might take a few days though since Im currently preoccupied with some real-life responsibilities.


I’ve been a busy little beaver stealing ideas from open-props and adding them to Extreme Dark. Ideas that are proving to be amazingly useful. They make user-styles consistent across pages and dialogs (no more “which color red was I using to indicate that?”).

I’ve got a PR in to Sepitus that will make it easier (and more manageable/maintainable/supportable) to add support for arbitrary userscripts (among other things).

The basic idea:

  • WK Elementary dark defines a bunch of custom properties for coloring by semantics (things that indicate Kanji vs. Vocabulary use var(--ED-kanji-clr), things that represent the Guru stage vs Apprentice stage use var(--ED-guru-clr), things that indicate progress, and so on.

  • The base stylesheet themes the official WK pages only. (We might eventually relax this and also add styling for the most common userscripts that don’t have dark mode or adjustable colors).

  • Anyone that knows a little CSS can fairly easily write a stylesheet to over-write any userscript’s colors. We can maintain a github respository for those, but they are just text files that can be easily shared, or just made for yourself. (I’ll post a video of how to do it – it’s not rocket science.)

  • Script owners can also write or modify their scripts to be compatible by using fallbacks, e.g.:

    #my-script .my-class { 
      background-color: var(--ED-kanji-clr, limegreen); 

    If Elementary dark is installed, it will appear with a blueish background, otherwise with a limegreen background (yuck!).

I’ll write (or re-write) preliminary stylesheets for:

  • Self-study
  • Ultimate-timeline
  • Stroke order

I may eventually write an app that lets people visually create and store their own color themes using this system. It could present mockups of the dashboard or other pages to show you what your chosen colors would look like.

By the way: I did all this with Elementary Dark mainly because it was just released and is starting fresh, not out of any sort of concern/dislike with Breeze Dark or whatever.

Also, if anyone wants to play with the stuff in my PR (as in, help me debug stuff) it’s available here: WKElementaryDark/WKElementaryDark.css at rrw-42 · wrex/WKElementaryDark · GitHub


It might take a few days


So it’s been over a month now. A lot of things happened, a lot of things changed. But at last, you can install a module that will make the Stroke Order script serviceable. Whats more, it will now use the same color palette as the theme itself.

I’ll add another reply to the thread to bump the activity in the hope that more people find this.

@Sepitus really did all the heavy lifting, he accepted a bunch of my suggestions but the hard part is starting with a blank sheet of paper, not kibitzing.

Please read the guide!!

This is much more than just another dark theme now. It’s a framework for building your own them now, in case you aren’t completely satisfied with @Sepitus’s beautiful color scheme or my much more intense but logical theme.

Make everything whatever color you like! I’ll be announcing another tool imminently that makes this process fun and easy.

Most important highlights about this stylesheet:

  • WKED uses a semantic naming convention and CSS custom properities (aka “CSS variables”) for everything. This makes it much easier to style things however you like.

    • “Semantic” naming means we named properties based on the meaning of the things they style, instead of where they are or what color they are. For example, we have properties named --ED-kanji, --ED-vocab, --ED-apprentice, --ED-text, etc… You should be able to guess what those properties affect on any given Wanikani page.

    • Custom props mean you should never need to edit the WKElementaryDark stylesheet itself. Instead, if you want to use different colors, just create your own stylesheet and override just the properties you want to change (examples are available).

  • The WKED stylesheet itself only styles the default Wanikani pages for the most part. We’ve created some adjunct stylesheets for common userscripts to make them pick up WKED styling (WITH whatever overrides you specify). We (or others) can add to this collection over time. (Open framework menus and the self-study quiz are included by default – currently the only exception).

  • Everything is under revision control, so it should be feasible to keep things manageable as Wanikani inevitably makes changes. Who knows, maybe someday they’ll support an official dark mode!



Here’s another riff. I call it “blueblueblue” (to match my mood: wife just left for japan and it’s been raining like crazy all day):

:root {
  --USER-theme: "blueblueblue";
  --USER-surface-1: var(--blue-13); 
  --USER-surface-2: var(--blue-11); 
  --USER-surface-3: var(--blue-9); 
  --USER-surface-4: var(--blue-8); 
  --USER-surface-inv: var(--blue-2); 
  --USER-text: var(--USER-surface-inv); 
  --USER-text-inv: var(--USER-surface-1); 
  --USER-text-hl: #a97e42; 
  --USER-text-grayed: var(--gray-5); 
  --USER-brand: var(--seagreen-6); 
  --USER-progress: var(--USER-brand); 
  --USER-success: #519053; 
  --USER-alert: #9c4644; 
  --USER-radical: var(--seagreen-7); 
  --USER-kanji: var(--violet-10); 
  --USER-vocab: var(--blue-8); 
  --USER-apprentice: var(--violet-12); 
  --USER-guru: var(--violet-10); 
  --USER-master: var(--violet-9); 
  --USER-enlightened: var(--violet-7); 
  --USER-burned: var(--violet-4); 
  --USER-lesson: var(--USER-apprentice); 
  --USER-review: var(--USER-kanji); 
  --USER-correct: #58896f; 
  --USER-incorrect: #9c4644; 
  --USER-meaning: var(--rust-10); 
  --USER-reading: var(--gray-6); 

  /* palette colors */
  --gray-0: #ececec;
  --gray-1: #d0d0d0;
  --gray-2: #b4b4b4;
  --gray-3: #989898;
  --gray-4: #7c7c7c;
  --gray-5: #616161;
  --gray-6: #454545;
  --gray-7: #292929;
  --gray-8: #242424;
  --gray-9: #1e1e1e;
  --gray-10: #191919;
  --gray-11: #141414;
  --gray-12: #0e0e0e;
  --gray-13: #090909;
  --gray-14: #040404;
  --blue-0: #ebecf1;
  --blue-1: #ced2dd;
  --blue-2: #b1b7c8;
  --blue-3: #949cb4;
  --blue-4: #7881a0;
  --blue-5: #5b678c;
  --blue-6: #3e4c77;
  --blue-7: #213163;
  --blue-8: #1d2b56;
  --blue-9: #182449;
  --blue-10: #141e3c;
  --blue-11: #101830;
  --blue-12: #0c1123;
  --blue-13: #070b16;
  --blue-14: #030409;
  --violet-0: #edebf1;
  --violet-1: #d2cedd;
  --violet-2: #b7b1c8;
  --violet-3: #9d94b4;
  --violet-4: #8278a0;
  --violet-5: #675b8c;
  --violet-6: #4d3e77;
  --violet-7: #322163;
  --violet-8: #2c1d56;
  --violet-9: #251849;
  --violet-10: #1f143c;
  --violet-11: #181030;
  --violet-12: #120c23;
  --violet-13: #0b0716;
  --violet-14: #040309;
  --seagreen-0: #ebf0f1;
  --seagreen-1: #ced9dd;
  --seagreen-2: #b1c3c8;
  --seagreen-3: #94acb4;
  --seagreen-4: #7896a0;
  --seagreen-5: #5b808c;
  --seagreen-6: #3e6977;
  --seagreen-7: #215363;
  --seagreen-8: #1d4856;
  --seagreen-9: #183d49;
  --seagreen-10: #14333c;
  --seagreen-11: #102830;
  --seagreen-12: #0c1d23;
  --seagreen-13: #071216;
  --seagreen-14: #030709;

(Created with my themer tool)