Breeze Dark 2 - WaniKani Dark Mode

WaniKani API And Third-Party Apps
1

→ → Install Link ← ←

Make sure you have Stylus (Chromium / Firefox) installed! Then visit the link above and click install.

A completely rewritten successor to Breeze Dark.

  • More customizable (Change Highlight setting to green to make it look more like the original BD).
  • Reorder / hide / reduce Recent Mistakes / Extra Study / Level Progress / Lesson / Review panels
  • Lots of extra settings e.g. change font weight, “colourful” dashboard mode, invert review header colours, and much more…
  • Compatibility with popular scripts.
  • Hopefully fast updates to fix issues!

Source and issue tracker on GitHub, or feel free to let me know of any issues I’ve missed here.

Screenshots

Screenshots

image
image802×1303 119 KB

image
image907×1299 55.3 KB

image
image1670×1304 77 KB

image
image294×528 11 KB

Scripts

A few scripts without their own dark mode are included in the style. If there are any other specific ones you’d like included please let me know and I’ll try to get to them! For now, scripts with specific compatibility (others might also look fine or have dark mode built in, such as Heatmap :person_shrugging:):

  • WKOF UI / settings menu
  • Ultimate Timeline
  • Forecast Details
  • Extra Study Mover / CIDWWA
  • Extra Study Quiz
  • Lesson Hover Details
  • Dashboard Progress Plus
  • and more…

Version History

Update notes

0.3.1 - Styling on some settings pages, Forecast Details script.
0.3.2 - Fix running on community site.
0.3.3 - 0.3.4 - Styling for Ultimate Timeline, CIDWWA / ESmover.
0.3.5 - Styling for Extra Study Quiz, colour improvements, mobile menu fix.
0.3.9 - Settings to change the order of the Extra study, Recent Mistakes, and Level progress UI.
0.4.0 - Setting to swap quiz header background and text colours.
0.4.1 - 0.4.4 - Settings for meaning / reading colours, styling for Lesson Hover Details and Dashboard Progress Plus.
0.4.5 - Setting to invert SRS popup colours.
0.4.9 - Add colourful dashboard option, switch all settings to use the xStyle USO preprocessor.
0.5.0 - 0.5.1 - Added reduced recent mistakes div sizing, small fixes, profile page improvements.
0.5.2 - 0.5.3 - Fixes and styling for WK Terms page.
0.5.4 - 0.5.6 - Fixes after WK update.
0.5.7 - Added styling for WK Readers.
0.5.8 - 0.6.2 - Added option to reduce size of the Extra Study panel, fixes.
0.6.3 - 0.7.4 - Fixes after WK update and for sale page, fix for new WK Custom SRS script.
0.8.3 - 0.8.4 - Fixes for new SRS detail area, other improvements

20 Likes
2

This is a great start! I’ll be keeping an eye on it and trying it out. I’ll mention the scripts that I use that need to be updated.

Dashboard Progress Plus, Ultimate Timeline, Lesson Hover Details, Self Study Quiz (maybe), and Item Inspector*.

The Self Study Quiz link added by Reorder Omega to the Extra Study panel needs to be styled to match the ones above it and in an open framework settings dialog, the color picker input has a gray bar overlapping the text of the hex code that looks weird.

Also, I think you need to restrict the style to only work on the main wanikani site, as of now it also affects the community here which already has a dark mode built in.

*This one I actually don’t think you can do anything about because the script itself has original Breeze Dark theming built into its CSS and performs a check to determine if the user is using Breeze Dark with a mutation observer. Looking at it, I would need to go into the script and add new style rules for Breeze Dark 2 that use its CSS variables and then also change the code in the mutation observer to detect Breeze Dark 2 separately from Breeze Dark (which currently is only done by the difference in the color property of the body element)

1 Like
3

Whoops, fixed it to not run on the community site. I thought the forum had been looking a bit weird today but thought it was my imagination… :sweat_smile:

I’ll have a look at Dashboard Progress Plus, Ultimate Timeline, Lesson Hover Details, Reorder Omega and Self Study Quiz tomorrow morning and hopefully have an update out fixing them within 24h. Thank you for listing them out for me!

I’ll also have a look at Item Inspector - are you the dev for it?

4

Ah, no, I’m not. Here’s a link to its thread.

1 Like
5

Oh shoot, I totally forgot that Dashboard Progress Plus is currently broken right now (I’ve fixed it for myself and left instructions for my fix in its thread, but in your case of wanting to address the CSS this won’t be possible because the CSS of the script itself isn’t working properly after changes to the elements of the dashboard progress section). So you probably shouldn’t spend any time on that one until it gets fixed officially (if it does, I’m not sure if rfindley plans on supporting it anymore).

1 Like
6

Ultimate timeline should now work :slight_smile: Let me know if there’s anything you don’t like about its styling!

image
image1195×208 8.73 KB

7

Looks good! It made me realize that original Breeze Dark actually does something maybe unintentional, where on the hover info popup the item list will always use the rad/kan/voc colors even if data-mode is srs-stage, and the graph bars when set to SRS Level will also use the original SRS colors. I got so used to this I actually don’t like it the intended way, where they take on the new colors of the srs stages, so I just made the local edits to change it back x3

2 Likes
8

Thank you very much for this

1 Like
9

Looks pretty nice!
Care about supporting CIDWWA? It’s what I use for a lot of my userscripts for making header buttons and popups:
image
image

Things I’ve noticed:
Extra Study disabled buttons are a bit unreadable.
image

1 Like
10

I went ahead and just went through all of Item Inspector’s CSS and its theme detection function and made all the changes needed for it to work with this. There really isn’t a good way for me to share those changes though, and they’d have to be added to Item Inspector officially anyway. In any case, I’m just saying this to hopefully avoid the work being repeated unnecessarily.

2 Likes
11

I’ll have a look today at supporting CIDWWA! Which of your scripts is that first screenshot from?
Thanks for letting me know about the extra study buttons, haven’t had any of them disabled for a while so missed that.

12

Both of those are extra study mover, that’s a pretty good example of it. If you need any support from my side, don’t hesitate to ask.

1 Like
13

This looks pretty good, now I just need one like it for Kame Same. That website hurts my eyes.

1 Like
14

Styled those two menus - not sure if CIDWWA ever has any other kinds of UI that I need to take care of?

This is the CSS I’ve got right now for CIDWWA:

/* CIDWWA */
    .cidwwa-modal {
        background-color: var(--color-menu) !important;
        border: none !important;
        box-shadow: 3px 3px 4px #111;
    }
    .cidwwa-modal button {
        background-color: var(--color-menu);
        background-image: none;
        color: var(--color-text);
        border-color: var(--color-tertiary);
    }
    .cidwwa-modal button:hover {
        background-color: var(--color-menu);
        color: var(--color-tertiary);
    }
    .wk-custom-button {
        --focus-color: var(--color-tertiary) !important;
        --hover-color: color-mix(in srgb, var(--color-tertiary) 25%, #0000 75%) !important;
    }
    .wk-custom-button + .sitemap__expandable-chunk, .wk-custom-button + .sitemap__expandable-chunk:before {
        --dropdown-background: var(--color-menu) !important;
    }
    .es-mover-settings { color: var(--color-text) !important}
If you do have 10 minutes

If you do have 10 min - it would be great if you could replace a few of the hard-coded colours with some built-in WaniKani variables (ofc only where it would work also without BD2), for example .es-mover-settings could have its colour set to var(--color-text) rather than hardcoded black which would allow me to get rid of a line of my CSS without impacting CIDWWA without BD2. If you see any other places you can make use of that or another WK variable then that would be great, although from my quick look through I don’t see any that wouldn’t also change its look without BD2.

Of course, you could build in Breeze Dark support by adding my variables and keeping what they’re currently set to as fallback, for example switching:

.wk-custom-button + .sitemap__expandable-chunk, .wk-custom-button + .sitemap__expandable-chunk:before {
    background-color: var(--dropdown-background);
}

to use the BD2 variable for the background, like:

background-color: var(--color-menu, --dropdown-background);

Or swapping some styling in the .cidwwa-modal popup from:

background: rgb(244, 244, 244);

to

background: var(--color-menu, rgb(244, 244, 244));

And so on with the other elements I’ve needed to style for CIDWWA. That way it would have BD2 support while still not impacting the styling if the BD2 variables don’t exist.

Obviously if you don’t have the time / would rather not build in support for BD2 that’s absolutely no problem! But if you do it would definitely be nicer to not need as much CSS in BD2 for it :smile: (and would also give you more control over it)

A few of the most useful variables for you would probably be:
--color-text: built-in WK variable, with BD it defaults to an almost white grey, without it it’s almost black
--color-menu: popup / menu background color
--color-tertiary: highlight colour, used mostly for button outlines / hover colour, progress bars, etc.
--color-dashboard-panel-content-background: lighter gray used as page background on dashboard and in many other places.
--color-dashboard-panel-background: darker gray used for dashboard section backgrounds and other places.

EDIT: Added some BD2 variable info in case you do decide to use some

1 Like
15

Hello! Started using this now, and I wanted to thank you for your work! It looks great. I love it so much :sob:

1 Like
16

Thanks, glad you like it! Let me know if you have any issues with it and I’ll do my best to fix them asap :slight_smile:

1 Like
17

Been stuck with 1 monitor for a while now and I tend to split my screen between 2 windows. Wanikani creates a single menu button for the top buttons which opens this menu:

image
image923×923 49 KB

18

Oh I completely missed that! I’ll get a fix out for it in the next couple of hours :+1:

1 Like
19

Fixed!
Also @LupoMikti Extra Study is now styled (I still need to do the Reorder Omega link to it though)

1 Like
20

On Lesson side the hint box is quite bright and it doesn’t seem to appear in the options. (class is “wk-hint”)

image
image1433×565 21.9 KB

1 Like