[Userstyle] WaniKani Breeze Dark

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