[Userstyle] WaniKani Breeze Dark

That’s a new feature native to WK, it pops up when new reviews come available during your session. You can trigger it by shortening your review session with the reorder script and finishing with more reviews still available.

1 Like

Just a little request; it’d be cool if the burn color was red (FF3000) which looks much nicer in my eyes as it completes the rainbow from blue to red. Right now I manually set it to that color, but every time the style gets updated it obviously gets reset.

Do you mean this color with, or without the brightness filter applied?
Left is with filter (50% brightness), like it is currently in the style.
Right is without.


I could just make it a configuration option, like the other color options I’m already offering.
This would also be re-applied when you update.

I’d say with the filter. As without it’s too bright. I also mainly meant these guys (since I don’t have any burned items, yet :stuck_out_tongue: ):

But it should be red everywhere, of course.
An option would probably be the best soultion.

Well, I also don’t have any burned items (anymore, because I reset recently).
I just set the CSS class on the element :smile:.

I kinda like the idea of the burned items being red, i’ll maybe make that one the default.

1 Like


Finally got around to add the burned color option.

It might not be applied correctly at all places now, but should work at least on the dashboard, lattice pages and level progress.

1 Like

Can you add support for the stroke order userscript? It injects a stroke order diagram from jisho.org into the kanji and lesson pages, which unfortunately has a white background. I was able to get it to better blend in with:

#stroke_order {
    filter: invert(85%);

Not sure if this is the best way though.


You mean this one?

Added support for this script.

1 Like

having some weird line things going on?
btw, I love the theme, very nice on the ol’ eyes :slight_smile:

This is apparently a Chrome issue.

Awesome, works great, thanks!

Major update, kinda.

This style now supports the Usercss format as described here.
So it no longer depends on userstyles.org directly.

This might break current configurations, because I had to change the keys from SCREAMING_SNAKE_CASE to weird-snake-case.

I will still support both methods of installing.

– Val

1 Like

Just came back to WaniKani after over a half year off and this is the first thing I made sure to get working. :slight_smile: Aaah, so easy on the eyes…

1 Like

The style seems to add a huge space below the details window for ultimate timeline:


Also it’d be really nice if you could support the Level Progress Detail script :3

1 Like

I look into the first issue.

For the second one:
I’m not using the script and it doesn’t seem maintained anymore.
So I’ll probably not add support for that.


I second Powerpuncher’s request.
That would be nice to have different colors for the intermediate SRS levels, please :innocent:

I remember tinkering with this way back… I don’t use the script anymore, but maybe I can help anyway.

This is what mine looks like. Below I only explain how to fix the bars, adding the percentages and putting the whole thing in a dropdown is something else.

Let’s see… I added this to the top of the script (just under “use strict”) to fix how the bars are shaped.

$('head').append('<style id="progress-detail-fix">.bar[style*="width: 0%"]{display: none;}'+
     '.dashboard .lattice-single-character div {padding: 0 !important}'+
     '.chart .progress, .chart .progress .bar {border-radius: 0 !important;}</style>');

To fix the colors you can replace line 44 (line number before you added the above three lines) with

'<div class="bar" title="Guru+ ('+progress.gurued_total+'/'+progress.max+')"  style="background-color: #1cdc9a !important; background-image: linear-gradient(to bottom, #1cdc9a, #1cdc9a) !important; width: '+(progress.gurued_total*100.0/progress.max)+'%;">'+

and line 54 with

'<div class="bar bar-supplemental"  title="'+stageNames[i]+' ('+progress.srs_level_totals[i]+'/'+progress.max+')" style="opacity: '+opacity+' !important; background-color: #1cdc9a !important; background-image: linear-gradient(to bottom, #1d99f3, #1d99f3) !important; width: '+(percentage)+'%;">'+
1 Like

Line 44 and 54 get shifted down by 3 lines from the first step, so it’s actually line 47 and 57.
Otherwise works beautifully, thanks :3

295787090669469698 271396628672413696

1 Like

Huh, I’ve read it like you should add the three lines first xD

1 Like