[Userstyle] WaniKani Breeze Dark

Looking at your Timeline issue it doesn’t seem to be caused by this theme. That space is where the 18 vocab items should be shows. Are you running the WKOF version of Timeline? Because I don’t get a blank space


The timeline issue was my fault.

I targeted #timeline .review_info which has a bottom padding of 150px for some reason.
Moving the style overrides to #timeline .review_info .inner should have fixed it, I hope.


Yup, it’s fixed now, thanks :3

are you both using Chrome or Firefox?
With the latest Firefox, the linear-gradient does not seem to generate the color you expect.

how is this piece of CSS expected to generate 4 different colours for each “bar-supplemental” div ?

below CSS inspector shows that all div have the colour #dd0093


ps: the trick is using opacity to substract frontcolor to backcolor? it seems unsupported on FF.

I’m using firefox and what @Kumirei posted works perfectly for me.
I don’t know much css, so I can’t really help you.

I’m on Chrome.

I believe background-color is only a fallback for browsers which do not support the gradient. I don’t know why the background color is different from the gradient on apprentice bars. You are correct in that Hitechbunny used opacity to give different colors though. Opacity is supported in FF as of v.59.

You do not seem to have made the edits I suggested, which is they are all the same color.

I was assuming you are using the Breeze Dark theme, but I could well be wrong.
Can you please point me to the style/CSS you are using?

In the case of Breeze Dark, I can get better colours by commenting out the code-snippet that is describing the CSS for .progress section (around line 500).

Breeze Dark page:

here are 2 lines to comment out:

resulting display:

1 Like

The purple doesn’t match Breeze Dark’s SRS colours though

Wow! Installed the theme and i love it. Almost had to wear sungalsses when doing a review at nighttime :smiley: Thank you very much!

1 Like

Would you perhaps be willing to add support for the Keisei Phonetic-Semantic Composition Script (and also Niai Similar Kanji if you’re feeling doubly generous)? :tulip:

I really love your theme but it unfortunately clashes visually with those two useful scripts, since they retain the original Wanikani color scheme for the kanji and radicals but they also seem harder to read than before, probably because the font color changed to light grey along with the rest of the text.

1 Like

Seconded! Would love support for those userscripts in this theme :sunglasses:

1 Like

@kapibara @jbradleyc

Added initial support for the userscript.

Expect some layout bugs right now though, because formatting the twisted table/list layout in this userscript quite is a bit of a pain.

1 Like

Thank you so much!

Niai 似合い Visually Similar Kanji is made by the same person, so I expect supporting it would be very similar to whatever changes you made to accommodate the Keisei Phonetic-Semantic Composition Script, if you’re feeling up to it. I could be wrong though of course :upside_down_face:

I don’t know exactly why there’s a blank blue box up above in the other script, but I’m not too worried about it… the important stuff is on the right lol.

That would be even simpler, because that one doesn’t have any weird tables mixed in between.

It looks like the PSC script has a bug with radicals not displaying.
Same with or without the theme.
@acm2010 might want to know about that.

1 Like

Yeah, I wonder if a change WK made broke something, I know the fast/abridged script hit a snag recently.

Thanks again for your support, my reviews have never looked more slick :sunglasses:

It’s been a few months and I haven’t noticed any issues at all :upside_down_face:

Is there be any chance for color-coordinating Niai 似合い Visually Similar Kanji to go with it?

Title bar is broken now with the redesign. Gonna hack a fix together now but would be lovely to have it officially done! Thanks for the theme btw, it makes the site so much nicer to do work on when it gets a bit later

There are two “fixes” already made

My own fix

header.global-header {
    background: #232629;
    border: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7);

header.global-header a {
    color: #bcbcbc !important;

.sitemap__page--lessons[data-learnable-severity="low"] span, 
.sitemap__page--reviews[data-learnable-severity="low"] span {
    background-color: #232629 !important;
    color: #1cdc9a !important;

.sitemap__page--lessons[data-learnable-severity="medium"] span, 
.sitemap__page--reviews[data-learnable-severity="medium"] span {
    background-color: #232629 !important;
    color: #c9ce3b !important;

.sitemap__page--lessons[data-learnable-severity="high"] span, 
.sitemap__page--reviews[data-learnable-severity="high"] span {
    background-color: #232629 !important;
    color: #f67400 !important;

.sitemap--divider {
    border-color: #42464a;

.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
    height: 46px;
    //position: absolute;
    //left: calc(50% - 80px);
    z-index: 10000;

And this guy’s


That’s amazing, and much better than mine, thank you! Love the custom logo, that’s some dedication :+1:

1 Like

It’s actually not custom, it’s on the wanikani.com page if you’re not logged in; I just grabbed it from there

1 Like