Breeze Dark 2 - WaniKani Dark Mode

WaniKani API And Third-Party Apps
73

So I’ve been using an old version for a while now because whenever I encountered something I would manually fix it myself instead of just reporting here… for some reason. Well I finally took the time to diff the current version against my local copy and compile the fixes I’ve done that I think should be added in that weren’t fixed on their own (as opposed to the changes I make to customize the experience to my liking). Here’s what I have:

Additions and fixes

Add textarea[disabled], to rule that starts with textarea,. This fixes a text box in Wanikani Settings Importer/Exporter script.

Add .kotoba-table-list table, to the rule that starts .kotoba-table-list table a span and append .none-available onto .kotoba-table-list tr (to get .kotoba-table-list tr.none-available) in rule that starts with [class|=account-subscription] h3,. These two things fix the styling of the table list when using the userscript Leech List Unburnable Edit but in a way that introduces no changes for someone not using the script.

Add

.item-info-injector-accordion > button {
    color: var(--color-text);
}

below item info injector rule. This is needed due to weird behavior where the button does not inherit the text color. For some reason with Breeze Dark 2 enabled it becomes white anyway (but not the color of the --color-text variable), but with another userstyle like Elementary Dark enabled it stays black. In neither case does it actually inherit the color like it’s supposed to. This may be specific to my machine but I cannot figure out what’s causing it and having this rule is the only fix. If you can’t reproduce that’s ok, I’ll just continue adding this one myself. (Stroke Order Diagram is the script I use that injects a whole section into the item info if you’re looking for something to test it with. Oh, also, I did not look at this on item pages, only during reviews in the item info popup).

Change #wkof_ds .ui-dialog div, to #wkof_ds .ui-dialog div:not(.color-label), to fix the issue where the color selection input has an unwanted gray bar at the bottom of the text for the hex code.

I think the following might be an error? The first Ultimate Timeline rule has #timeline, timeline .review_info .inner but there is no “timeline” html element so the second selector should start with # right?

Edit: thanks to changes wanikani made, ultimate timeline needed to be updated to support radical svg that have inline styles. The stroke color goes back to being white. We need to change the #timeline .review_info .rad svg rule to #timeline .review_info .rad svg *. Timeline has been updated to use the standard webcomponent wanikani made that puts the svg with inline styling there. We instead need to do #timeline .review_info .item_list wk-character-image { --color-text: var(--color-text-dark); } to make sure the dark color is applied instead of the defined white.

Edit 2: I didn’t realize there was no styling for the additional content buttons that are disabled during review, so I quickly added the following to do that.

.additional-content__item--disabled i {
    filter: opacity(0.3);
}

Thanks for making such an easily maintainable and editable userstyle. It was always a pain to look at the original Breeze Dark and figure out what to change.

2 Likes