[Userstyle] WaniKani Breeze Dark

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.

Edit:
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

7 Likes

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

I am surprised by the size of this CSS modification, in my case it seems only the white header needs to be fixed. I am using :

   .global-header {
       background-color: rgb(35,38,41) !important;
       background-image: none !important;
    }

I think I will adopt the white logo too :slight_smile:

.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
}

ps: ok, i now understand where ‘data-learnable-serverity’ intervenes.

2 Likes

You mean my fix above? The reason it’s bigger is that I made everything conform to the Breeze Dark palette by defining text colors, border colors, box shadows, and so on. I am sure it works just fine with your fix, but the details would not be like Breeze dark had them previously.

I would like to share something that I’ve been working on for the last couple of days because I couldn’t find it anywhere else (forgive me if someone else did it already and I’m just repeating).

Basically, I’m using Kumirei’s fix for the header as a base, and I’ve written the following bit of code to define the colours of the radicals, kanji and vocab dropdowns according to the BD theme:

/* RADICALS, KANJI AND VOCABULARY DROPDOWNS */
.sitemap__section-header[data-expanded="false"]:hover {
    border-color: rgba(188, 188, 188, 0.25) !important;
}
.sitemap__section-header[data-expanded="true"] {
    border-color: #bcbcbc !important;
}

.sitemap__expandable-chunk--radicals,
.sitemap__expandable-chunk--radicals:before {
    background-color: /*[[radicals-color]]*/ !important;
}
.sitemap__section-header--radicals[data-expanded="true"] {
    border-color: /*[[radicals-color]]*/ !important;
    color: /*[[radicals-color]]*/ !important;
}
.sitemap__section-header--radicals[data-expanded="false"]:hover {
    border-color: rgba(61, 174, 233, 0.25) !important;
    color: /*[[radicals-color]]*/ !important;
}
.sitemap__expandable-chunk--radicals[class*="rad"] * {
    color: #232629 !important;
}

.sitemap__expandable-chunk--kanji,
.sitemap__expandable-chunk--kanji:before {
    background-color: /*[[kanji-color]]*/ !important;
}
.sitemap__section-header--kanji[data-expanded="true"],
.sitemap__section-header--kanji[data-expanded="true"] span {
    border-color: /*[[kanji-color]]*/ !important;
    color: /*[[kanji-color]]*/ !important;
}
.sitemap__section-header--kanji[data-expanded="false"]:hover,
.sitemap__section-header--kanji[data-expanded="false"]:hover span {
    border-color: rgba(253, 188, 75, 0.25) !important;
    color: /*[[kanji-color]]*/ !important;
}
.sitemap__expandable-chunk--kanji[class*="kanji"] * {
    color: #232629 !important;
}

.sitemap__expandable-chunk--vocabulary,
.sitemap__expandable-chunk--vocabulary:before {
    background-color: /*[[vocab-color]]*/ !important;
}
.sitemap__section-header--vocabulary[data-expanded="true"],
.sitemap__section-header--vocabulary[data-expanded="true"] span{
    border-color: /*[[vocab-color]]*/ !important;
    color: /*[[vocab-color]]*/ !important;
}
.sitemap__section-header--vocabulary[data-expanded="false"]:hover,
.sitemap__section-header--vocabulary[data-expanded="false"]:hover span{
    border-color: rgba(46, 204, 113, 0.25) !important;
    color: /*[[vocab-color]]*/ !important;
}
.sitemap__expandable-chunk--vocabulary[class*="vocab"] * {
    color: #232629 !important;
}

I’ve made it so that the colours of the buttons change when you hover over them in the same way that they do in the original web page, and the text is now dark grey to make it readable. The border of the Levels and Account buttons is also more visible (light gray).

This is the first time that I’ve ever coded in CSS, and I’ve done it by taking as an example the code that was already written, so I’m sure there may be a better way of writing it. But it works for me, and I’m slightly proud of it, so I hope someone else finds it useful!

Here are some screenshots:


PS: @Kumirei I see you have tiny lines separating your reviews and level buttons, and the account button. Would you mind explaining how you do that?

3 Likes

Looking at the CSS I posted it seems like it’s this rule which applies a border to the sitemap divider elements

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

I can’t confirm if that’s what it was, as I have since opted for a different design, but that should be it

4 Likes

I have recently installed this userstyle but seem to have an issue with some of the text, and colours on the header (after installing your code update):

image

Not sure what to do, I’m a complete amateur here. Help if you can!

Also omitted two lines from yours because of exception that popped up:

//position: absolute;
//left: calc(50% - 80px);

I also installed cassini’s code from october 22 but had no problems here.

If i need to delete it start afresh, let me know. Or if there’s a fix, get in touch :smiley:

i’m using opera browser btw, not sure if that is causing an issue.

Ah, yes, they have changed some things since then. They don’t do the different colors for different amount of due items anymore, so you will have to choose a color of your own (or install the Judgement Day script).

Try this. Here I used the Breeze Dark orange color, but if you want something else, or different ones for lessons and reviews I’ll help you with that.

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;
}
.navigation-shortcut a span {
    background-color: #232629;
    color: #f67400 !important;
}

.navigation-shortcut[data-count="0"] span {
    background-color: #232629;
}

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

.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
    height: 46px;
    z-index: 10000;
}

.navigation-shortcut a {
    padding-top: 2px;
    border: none;
}

Incredible, thanks so much. Just what I was looking for.

Beings as you know exactly what you’re doing, and though I would love to do it myself someday I have the luxury of asking for your help, I have another request.

Once into the review section, it is nice and mellow apart from when I answer correctly and, with the gentle night-light setting, a fairly harsh green light appears for the answer bar:

If there is a much easier colour you can think of which would suit this dark mode better, I’d love to see it. Perhaps a much more mellow tone of green, or if this is too dark, something that doesn’t induce alertness. What do you have for your review section?

Also, the red in the corner is slightly off-putting but this is another userscript for keyboard shortcuts, not sure if this is amendable. I might just switch it off anyway.

I really appreciate the help :slight_smile:

I just use standard Breeze Dark colors for reviews, but you can use this to change the color. You might want to try the more yellow WK default green, which I already put in there (#88cc00). If you want to try different colors you can find color pickers online.

#answer-form fieldset.correct input[type=text]:disabled {
    background-color: #88cc00 !important;
}

Regarding the red button I would recommend you turn Override off and switch to Double-Check instead. It has the same function (and more) and is being maintained.

2 Likes

Thanks, I have just got Double-Check on here as well.

Starting to get the hang of it now with changing the colour scheme. I’ll come back if there’s anything else (^O^)/

1 Like

Happy new year everyone,

Decided to give Japanese another shot in 2020 and finally stick to it.
Also updated my theme a bit to fix some of the issues with the layout changes.

PS.:
The UserCSS link changed because I updated my automatic build setup.
Just try installing again if it does not update automatically.

PPS.:
The style posted on userstyles.org will no longer receive updates.

8 Likes