Announcing the companion app to the Wanikani ElementaryDark stylesheet (dark theme).
Edit:
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
Surfaces
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”.
Reviews
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.
Dashboard
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.
Exporting
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.
Documentation
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.
Enjoy!
