[Userstyle] WaniKani Breeze Dark

Thanks a lot! I’m in a situation very similar to @Cassini’s and having my good old dark theme back will definitely help me get that extra motivation boost I need to tackle my 2k+ reviews (orz)

1 Like

Just created a PR on the gitlab, awaiting on merge for this to be fixed in the next update

1 Like

Oh thanks, I’d forgotten there was a gitlab!

Breeze Dark doesn’t work for me all of a sudden :thinking:

this is what it says but I've no idea what it means

What part doesn’t work? It doesn’t load at all?
Seems to be working fine to me - you’re sure you didn’t change something in the Stylus extension? That one error shouldn’t make any difference so it’s likely a problem with Stylus, or maybe you don’t have the latest version of Breeze Dark? Make sure it’s updated

1 Like

Thank you! I think it might’ve just been a glitch or something? I just clicked some buttons and now it’s working again :stuck_out_tongue:

1 Like

Seems like it doesn’t get updated very often…

Yeah hopefully @artemigos will have time to take a look at some point! They have managed to get some impresively quick updates out with some of the more breaking changes in the past though :smile:
If they don’t get a chance to soon, and especially if there’s formatting issues with the upcoming kana-only vocab, then someone else could fork it and update it (if no one has within a couple of months I’ll do so when I have time)

I’ll also write some quick CSS for the new custom synonyms in the next day or two, it’s currently pretty ugly with breeze dark :slight_smile:

1 Like

This has stopped working for the extra-study component on the front page
Had to add in this bit manually to get it working (I’m no css expert)

I’m guessing this isn’t necesarilly the right way to correct this, but it’s worked for me so far.


Half the front page is white again, an update to the style would be appreciated.

Wish I had the knowledge to code these things myself. >.<

Made a quick and ugly hack, based on @Motifier 's data:

  .level-progress-dashboard .dashboard-panel {
    background-color: #1e2123;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;}
  .level-progress-dashboard .level-progress-dashboard__content {
    background-color: #1e2123 !important;
        border-radius: 5px !important;
        color: #bcbcbc !important; }

I’m currently rewriting Breeze Dark from scratch to hopefully be a bit easier to maintain and making use of more of the built-in CSS variables (which I imagine didn’t exist when Breeze Dark was first written). I have only just started so it’ll take a bit, but hopefully when complete it’ll look as good as the current one and work with the latest WaniKani updates!


How did you get the extra study image to be like that? It’s much better than the invert filter in Breeze Dark right now.

With this long CSS filter! filter: invert(81%) sepia(9%) saturate(582%) hue-rotate(169deg) brightness(96%) contrast(93%);
I colour-matched the background of the image to the Breeze Dark grey - I’m doing the same with the other images (although haven’t yet decided whether I should keep a bit of colour on the lessons and reviews buttons…)

1 Like

Wow! Those values are so specific, it must have taken a while to get it just right.

I noticed that the gray in your screenshot is a different one from the #31363b used in (my local version of) Breeze Dark right now. I like it a lot better too.

Edit: wow, I just checked with a color picker and it actually is #31363b. I don’t know why it looks so different in your screenshot from how it is on my monitor.

1 Like

All the colours will be customizable with the Stylus settings menu, so you’ll be able to change the gray if you like! I’m also making the “Highlight color” affect a lot of things (outlines, forecast bars, button hover colours, etc.) so that you can really change the feel of the page.

The base dashboard is pretty much finished, now I just need to sort out the character pages, lessons, a couple of the popular scripts, and then I’ll release a first version…


Released a first version of my completely rewritten Breeze Dark 2, which will hopefully work a bit better with some of the recent WaniKani site updates and will be easy for me to maintain.

Still a WIP! but all the main pages should be correctly styled. You can also customize most of the colours. Some scripts already are compatible, others I’ll work on in the next few days, let me know if there’s any specific ones you want!

(@LupoMikti @Granyala @Motifier tagging as you were having issues / showing interest)


Just wanted to let you know that recently this userstyle has been causing an issue where the collapsing of the reading and meaning sections does not work properly (you cannot collapse them, and the one that is supposed to start out collapsed has its content displayed anyway, i.e. a reading question should have the meaning section collapsed when you show info, but instead the meaning section will be expanded even though the arrow indicates it should be collapsed). I can’t really tell what’s causing it, but I’m also not very good with CSS. When you get a chance can you take a look at it and see what’s going on?

Edit: I thought about it a little harder and figured out the issue. Just needed to change the very first rule with display: grid to .subject-section--meaning #section-meaning:not([hidden]), .subject-section--reading #section-reading:not([hidden]) as it appears they are no longer using a class to do the collapsing.

1 Like

Ah - I actually looked at that when writing the reviews CSS for Breeze Dark 2 (similar layout implemented there) but didn’t think to fix it here. Updated the code in that comment, should work now!

1 Like

Very nice.

Thanks for your work. :slight_smile:

1 Like