[Userstyle] WaniKani Breeze Dark

omoide · October 3, 2019, 11:18am

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

.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.

Kumirei · October 3, 2019, 12:37pm

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.

Cassini · October 21, 2019, 11:57pm

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?

Kumirei · October 22, 2019, 1:43am

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

anon74501252 · November 21, 2019, 4:49pm

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

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

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

Kumirei · November 21, 2019, 5:08pm

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;
}

anon74501252 · November 21, 2019, 10:25pm

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

Kumirei · November 21, 2019, 10:32pm

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.

anon74501252 · November 21, 2019, 11:01pm

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^)／

valeth · January 5, 2020, 4:03pm

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.

Saimin · January 5, 2020, 5:29pm

nice! thanks for the script, been using it for a long time (with fixes)!

i guess i have to uninstall and reinstall it? because it still has my modifications and i don’t see a way to update it within the Stylish chrome extension.

valeth · January 5, 2020, 6:19pm

The only supported (and tested) way to install it is with the Stylus extension, which supports updates from any installation source.

I don’t know if Stylish can even install styles in UserCSS format, which is the only way now.

Cassini · March 10, 2020, 1:16am

I just noticed that in the Lesson Quiz section there is no space before the words “Meaning” and “Reading”. I found this to be caused by the Breeze Dark stylesheet, maybe it was affected by the changes to the front-end code they announced?

How can this be fixed? The BD code is huge and I get very lost

dogandwolf · March 10, 2020, 1:21am

Any way to make the new UI features on the dashboard dark?

DonChanHype · March 10, 2020, 1:43am

Hey all! Super dirty fix for the new elements and the above Vocab Meaning spacing problem. Paste it to the bottom of your style, let me know if I messed up in some way.

EDIT: fixed the search bar margin

EDIT 2: accounted for the different completion amounts on review and lessons

/* DIRTY FIXES - DONCHANHYPE */

/*
fixed by Kumirei:
https://community.wanikani.com/t/userstyle-wanikani-breeze-dark/16973/178?u=donchanhype
*/
.logo__link {
    background-image: url(https://cdn.wanikani.com/assets/wanikani-logo--white-f3ad8af11367266e979027478ef25f93bdd9c17b3e017a85a598ceed7ddb6cf9.png);
    height: 46px;
    z-index: 10000;
}

/* Search Form */
form#search-form {
    margin-top: 27px;
}

/* Forecast Section */
.dashboard .progress-and-forecast .lessons-and-reviews {
    background-color: #2d3237 !important;
    border-radius: 0px !important;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.7), 0px 0px 0px rgba(0, 0, 0, 0.7) !important;
}

.bg-white {
    background-color: #2d3237 !important;
}

.review-forecast__day-header::before {
    background-color: #ffffff00 !important;
}

.forecast td {
    color: #bcbcbc;
}


/* Fixed Progress Bar text */
.progress-bar__extra-label {
    color: #333 !important;
}



/* New Lesson Button Stuff */
.lessons-and-reviews__lessons-button {
	background-color: #a0f;
}

/*Both button's text */
a.lessons-and-reviews__button.lessons-and-reviews__lessons-button.lessons-and-reviews__lessons-button, a.lessons-and-reviews__button.lessons-and-reviews__reviews-button.lessons-and-reviews__reviews-button {
    color: #ffffff !important;
}

/*Both button's number button */
a.lessons-and-reviews__button.lessons-and-reviews__lessons-button.lessons-and-reviews__lessons-button > span, a.lessons-and-reviews__button.lessons-and-reviews__reviews-button.lessons-and-reviews__reviews-button span {
    color: #232629 !important;
    background-color: #f8f8f8;
}

/* Awful fix for the Lesson Meaning spacing being broken, please fix properly */
div#lessons.pure-g-r div.pure-u-1 div#quiz.noSwipe div label#question-type.reading strong, div#lessons.pure-g-r div.pure-u-1 div#quiz.noSwipe div label#question-type.meaning strong {
    margin-left: 8px;
}

deltacat3 · March 10, 2020, 2:22am

Thank you @DonChanHype !

DonChanHype · March 10, 2020, 2:22am

No problem! I was surprised no one else had done it before me haha

epyon_10 · March 10, 2020, 8:04am

Thank you so much!

I was already debating whether it is better to turn it off (due to an eye disease bright colours are awful for me to look at, so I am usually always going for dark themes, or just minimum the time I spent on sites) or just live with it and not be able to read the numbers.

Pandabrain · March 10, 2020, 8:24am

There is a browser extension called “Dark Reader”. It automatically turns every website dark themed. Not necessarily better than this theme for wanikani but very usefull for any other website.
(I happen to have a few colleagues who have only a couple percent vision left, also blinded by bright light due to their condition and they found it to be very useful as well.)

epyon_10 · March 10, 2020, 11:04am

Oh my gosh, thank you so much!! I have never heard about it before. You made my day! This is just brilliant. Take this, autoimmune disease!

I had no idea this was even a thing… because I am too stupid to get anything done, I never imagine other intelligent people out there can change the world to a better place. Damn, sometimes I am too stupid for my own good XD