Custom color schemes: WKED Themer

Announcing the companion app to the Wanikani ElementaryDark stylesheet (dark theme).


Find the app here:

What is it?

Its an app that let’s you interactively create your own WaniKani color scheme. Since most of us on this forum spend many hours on Wanikani, it makes sense to make it look pleasant to our sensibilities.

Basically, the app displays one of three mockups of the Wanikani UI in the middle of the screen. On the left are color pickers that let you adjust any of the WaniKani Elementary Dark custom properties (WKED props from here on out). You can define them as custom colors, or reference other variables and have them pick up those colors (I like the “reviews” prop to be the same as the “kanji” color, for example, as that’s what we are mostly reviewing).

At the bottom is an optional section to define a palette of colors that relate to each other in some way that makes sense to you. It’s easier to create a coherent scheme if you have a limited number of hues instead of making everything from scratch.

The sample pages


Initially you’ll see “surfaces” with text. The Wanikani UI (like most UIs) has boxes inside of boxes. Usually you’ll want a coherent sequence of shades so that the innermost boxes (CSS sections or divs) are lighter and appear closer to you). You’ll usually want to start here to ensure your text is readable over the various “surfaces”.


This is a mockup of the Review and Lesson pages, where you’ll spend the most time with Wanikani. You’ll want to spend a lot of time here to tweak things to your satisfaction.

The toggles at the bottom let you see how review/lesson pages look in various states.


This is a pretty crude approximation of the Wanikani Dashboard, which contains a LOT of information. It’s helpful to get a preview of how everything will look ahead of time, but you’ll need to try your override stylesheet on the real Wanikani UI to see how it will really look in practice.


At the top of the screen is an export button that let’s you export your current properties to a new stylesheet and copy it to your clipbard. You can just add this to something like stylus directly. If you’ve already got WKED installed, your override stylesheet should take effect immediately.


Hopefully, this is a pretty easy app to figure out, but documentation is available in the app itself: just click on the question mark icon up top if you get stuck.

Remaining work

This is just the initial release. There are doubtless still bugs to work out.

Currently, the app doesn’t save any state between sessions. I’ll probably at least add localStorage support on your browser eventually, so it remembers where you left off last time. I’m toying with the idea of putting up a database of any styles that people would like to save, though.

Getting help

Please post to this topic if you have any difficulty, or if you create an interesting theme.

If you really want me to fix something, please open an issue on github.



Looks like you omitted a few minor details by accident, but worry not, I have you covered.

Here’s a link to the app itself :grin:

Joking aside, I love it. Tinkering with different palettes will probably be the main reason why I’ll be neglecting my reviews in the near future. Something about it is just soo addicting.

Here’s a comfy pastel palette I put together this morning if someone’s looking for inspiration.


Just one!

Admittedly an important one, though…

I know, it really is fun to play with. :smile:


Apologies in advance if I just stomped on anyone playing with this right now.

I just pushed two fixes:

  • The pips on the dashboard sample now use the “progress” color rather than the “brand” color.

  • The export dialog now requires less vertical height, so the “copy to clipboard” button should no longer be cut off on smaller screens. Also added a minimum screen size check (the app should work on most tablets or desktops, but won’t work on phones).

That’s it for today.

I’ll try to be better about giving warning before pushing changes going forward. I will create probably a staging branch and app and schedule the cutovers.

1 Like

Okay, I’ve set up a staging instance:

Production app is at (currently v1.0.2)

Staging version is at

I’ve added the facility to persist state in browser storage in the staging version. Now you won’t lose any changes if you close your browser session. I may add one or two other features if I have time.

I’ll push the changes to the production version and bump the version to v1.0.3 at 0000 UTC tomorrow (~22.5 hours from now).

Going forward, the staging version may change without notice, but I’ll try to provide ~24 hours (or more) notice before updating the production site. I don’t anticipate that many more changes, though.


Added more features to staging:

  • Now has an input for a theme name. The theme name is also saved as a custom property declaration (--USER-theme).

  • Added a feature to import as well as export theme data.

  • Fixed a bug with the palette color selector for each --USER property. Previously, it only used the center swatch color value (with the “-7” suffix) regardless which swatch you selected.