[Userstyle] WaniKani Elementary Dark

Heh. No good deed goes unpunished.

I never got why people were so pushy about dark themes until I started using them myself. Now a sudden light theme page is an assault on my senses — it’s physically painful!

Dark theme is important. Breeze Dark has been working well enough for me lately, but I will definitely try Elementary Dark for a while.

Any theme is going to be a bit brittle (WK changes things – for the better – on occasion) but this looks extremely promising.

Do you have this in github? I’m going to hack on it a bit and would be happy to submit a PR.

NVM – it’s in the header!

2 Likes

Is that like starting to wear sunglasses to look cool, and then eventually you find that you are a vampire who is allergic to sunlight? :grin:

6 Likes

Looks pretty damn cool. As a fan of the bunpro dark mode I approve :smiley:

One thing I would like to request is a slightly more differentiated coloring during reviews:

I usually speed through easier reviews and start typing reading or meaning already simply based on color muscle memory. The script makes the coloring pretty similar so that on reflex I already typed out half the meaning when I have to dial it back because it wants the reading and vice versa

1 Like

Just pushed out a theming solution for that particular plugin, hope you like it

2 Likes

Did I swap the meaning and reading background colors? Oh no D:
As far as I can tell the meaning/reading colors are the same as in the default wanikani theme. But I could add the option to swap them around or potentially choose entirely different colors. For now I will add it to the issue pile.


Oh you are probably comparing it to breeze. Indeed it has reading distinguished by lighter shade of gray compare to meaning. I will add an option to invert the colors later today.


Just pushed out version 1.0.4, you should be able to change the colors of reading/meaning headers in quizes by altering one or more of the following variables at the top of the file

image

It might still need some changes to work in lessons, but as I dont currently have any. I have no way of checking for compatibility there.


Example of an altered look:

image

1 Like

I love it! Another for the issue pile (the background-color was originally #fff):

This is the self-study script: [Userscript] Self-Study Quiz

2 Likes

Probably some of mine global formating is clashing with the script. I will take a look at it.

2 Likes

Thanks for the response and effort again :+1:

1 Like

Aaa, your work is just amazing, a spectacular alternative for Breeze Dark. Not to mention for some reason Breeze Dark just looked a bit distorted and a bit buggy, Elementary Dark actually works for me perfectly.

Thank you so much for your time in this Style, and good luck with those reviews :hugs:

4 Likes

Thanks for providing an alternative to Breeze Dark. I will give it a go. I’m very used to Breeze Dark’s theme and even its quirks at this point, though. The screenshots from Elementary Dark look slick (and sick). :crabigator:

1 Like

As I suspected, I was way too lenient with some of the selectors. In this case the script was picking up on a generic input[type="text"] style. For now I made the selector in question more strict, so it should be usable with the current version 1.0.5.

Unfortunately some elements are still picking up on what they shouldn’t. I need to go through the stylesheet and remove most, preferably all, of these generic selectors.

image

But that is an issue for another day. Hope this partial fix at least suffice for now

1 Like

You previously said that you don’t really work with any userscripts installed, but I think the Stroke Order userscript is a widely used add-on, so I just wanted to give some feedback. If you think it’s worth your time, then I think it’d be amazing to make this look actually readable!

2 Likes

I will add it to the issues.
It might take a few days though since Im currently preoccupied with some real-life responsibilities.

2 Likes

I’ve been a busy little beaver stealing ideas from open-props and adding them to Extreme Dark. Ideas that are proving to be amazingly useful. They make user-styles consistent across pages and dialogs (no more “which color red was I using to indicate that?”).

I’ve got a PR in to Sepitus that will make it easier (and more manageable/maintainable/supportable) to add support for arbitrary userscripts (among other things).

The basic idea:

  • WK Elementary dark defines a bunch of custom properties for coloring by semantics (things that indicate Kanji vs. Vocabulary use var(--ED-kanji-clr), things that represent the Guru stage vs Apprentice stage use var(--ED-guru-clr), things that indicate progress, and so on.

  • The base stylesheet themes the official WK pages only. (We might eventually relax this and also add styling for the most common userscripts that don’t have dark mode or adjustable colors).

  • Anyone that knows a little CSS can fairly easily write a stylesheet to over-write any userscript’s colors. We can maintain a github respository for those, but they are just text files that can be easily shared, or just made for yourself. (I’ll post a video of how to do it – it’s not rocket science.)

  • Script owners can also write or modify their scripts to be compatible by using fallbacks, e.g.:

    #my-script .my-class { 
      background-color: var(--ED-kanji-clr, limegreen); 
    }
    

    If Elementary dark is installed, it will appear with a blueish background, otherwise with a limegreen background (yuck!).

I’ll write (or re-write) preliminary stylesheets for:

  • Self-study
  • Ultimate-timeline
  • Stroke order

I may eventually write an app that lets people visually create and store their own color themes using this system. It could present mockups of the dashboard or other pages to show you what your chosen colors would look like.


By the way: I did all this with Elementary Dark mainly because it was just released and is starting fresh, not out of any sort of concern/dislike with Breeze Dark or whatever.


Also, if anyone wants to play with the stuff in my PR (as in, help me debug stuff) it’s available here: WKElementaryDark/WKElementaryDark.css at rrw-42 · wrex/WKElementaryDark · GitHub

2 Likes

It might take a few days

:sweat_smile:


So it’s been over a month now. A lot of things happened, a lot of things changed. But at last, you can install a module that will make the Stroke Order script serviceable. Whats more, it will now use the same color palette as the theme itself.

I’ll add another reply to the thread to bump the activity in the hope that more people find this.

@Sepitus really did all the heavy lifting, he accepted a bunch of my suggestions but the hard part is starting with a blank sheet of paper, not kibitzing.

Please read the guide!!

This is much more than just another dark theme now. It’s a framework for building your own them now, in case you aren’t completely satisfied with @Sepitus’s beautiful color scheme or my much more intense but logical theme.

Make everything whatever color you like! I’ll be announcing another tool imminently that makes this process fun and easy.

Most important highlights about this stylesheet:

  • WKED uses a semantic naming convention and CSS custom properities (aka “CSS variables”) for everything. This makes it much easier to style things however you like.

    • “Semantic” naming means we named properties based on the meaning of the things they style, instead of where they are or what color they are. For example, we have properties named --ED-kanji, --ED-vocab, --ED-apprentice, --ED-text, etc… You should be able to guess what those properties affect on any given Wanikani page.

    • Custom props mean you should never need to edit the WKElementaryDark stylesheet itself. Instead, if you want to use different colors, just create your own stylesheet and override just the properties you want to change (examples are available).

  • The WKED stylesheet itself only styles the default Wanikani pages for the most part. We’ve created some adjunct stylesheets for common userscripts to make them pick up WKED styling (WITH whatever overrides you specify). We (or others) can add to this collection over time. (Open framework menus and the self-study quiz are included by default – currently the only exception).

  • Everything is under revision control, so it should be feasible to keep things manageable as Wanikani inevitably makes changes. Who knows, maybe someday they’ll support an official dark mode!

Enjoy!

2 Likes

Here’s another riff. I call it “blueblueblue” (to match my mood: wife just left for japan and it’s been raining like crazy all day):

:root {
  --USER-theme: "blueblueblue";
  --USER-surface-1: var(--blue-13); 
  --USER-surface-2: var(--blue-11); 
  --USER-surface-3: var(--blue-9); 
  --USER-surface-4: var(--blue-8); 
  --USER-surface-inv: var(--blue-2); 
  --USER-text: var(--USER-surface-inv); 
  --USER-text-inv: var(--USER-surface-1); 
  --USER-text-hl: #a97e42; 
  --USER-text-grayed: var(--gray-5); 
  --USER-brand: var(--seagreen-6); 
  --USER-progress: var(--USER-brand); 
  --USER-success: #519053; 
  --USER-alert: #9c4644; 
  --USER-radical: var(--seagreen-7); 
  --USER-kanji: var(--violet-10); 
  --USER-vocab: var(--blue-8); 
  --USER-apprentice: var(--violet-12); 
  --USER-guru: var(--violet-10); 
  --USER-master: var(--violet-9); 
  --USER-enlightened: var(--violet-7); 
  --USER-burned: var(--violet-4); 
  --USER-lesson: var(--USER-apprentice); 
  --USER-review: var(--USER-kanji); 
  --USER-correct: #58896f; 
  --USER-incorrect: #9c4644; 
  --USER-meaning: var(--rust-10); 
  --USER-reading: var(--gray-6); 

  /* palette colors */
  --gray-0: #ececec;
  --gray-1: #d0d0d0;
  --gray-2: #b4b4b4;
  --gray-3: #989898;
  --gray-4: #7c7c7c;
  --gray-5: #616161;
  --gray-6: #454545;
  --gray-7: #292929;
  --gray-8: #242424;
  --gray-9: #1e1e1e;
  --gray-10: #191919;
  --gray-11: #141414;
  --gray-12: #0e0e0e;
  --gray-13: #090909;
  --gray-14: #040404;
  --blue-0: #ebecf1;
  --blue-1: #ced2dd;
  --blue-2: #b1b7c8;
  --blue-3: #949cb4;
  --blue-4: #7881a0;
  --blue-5: #5b678c;
  --blue-6: #3e4c77;
  --blue-7: #213163;
  --blue-8: #1d2b56;
  --blue-9: #182449;
  --blue-10: #141e3c;
  --blue-11: #101830;
  --blue-12: #0c1123;
  --blue-13: #070b16;
  --blue-14: #030409;
  --violet-0: #edebf1;
  --violet-1: #d2cedd;
  --violet-2: #b7b1c8;
  --violet-3: #9d94b4;
  --violet-4: #8278a0;
  --violet-5: #675b8c;
  --violet-6: #4d3e77;
  --violet-7: #322163;
  --violet-8: #2c1d56;
  --violet-9: #251849;
  --violet-10: #1f143c;
  --violet-11: #181030;
  --violet-12: #120c23;
  --violet-13: #0b0716;
  --violet-14: #040309;
  --seagreen-0: #ebf0f1;
  --seagreen-1: #ced9dd;
  --seagreen-2: #b1c3c8;
  --seagreen-3: #94acb4;
  --seagreen-4: #7896a0;
  --seagreen-5: #5b808c;
  --seagreen-6: #3e6977;
  --seagreen-7: #215363;
  --seagreen-8: #1d4856;
  --seagreen-9: #183d49;
  --seagreen-10: #14333c;
  --seagreen-11: #102830;
  --seagreen-12: #0c1d23;
  --seagreen-13: #071216;
  --seagreen-14: #030709;
}

(Created with my themer tool)

3 Likes

Just a note that we are working to support the upcoming changes.

It may not be ready on day 1 of the new changes going live, though.

One sneak preview:

Wanikani has indicated that they intend to make improvements in this area shortly after the new changes go live, but one annoyance is that the meaning and reading in the info section on review pages is very low contrast. I decided to go ahead and implement a fix in the dev version of WKED rather than wait, though.

It’s likely that when you click the info icon in the middle (or type “f”) during a review, the first thing you want to see is the meaning or reading that you just answered incorrectly.

Here’s how it looked before with Elementary Dark colors and no additional styling:

The primary meaning of “bonsai” is literally the lowest contrast text on the screen. Your eye has to wander for a while to find it.

Here’s how it looks in the dev version:

And with my preferred override colors:

2 Likes

Saying I wasn’t on top of things this time around would be an understatement, but whatever magic @Rrwrex pulled should be now live. If your WKED installation is still struggling with the new pages, try going into your stylus settings and force it to search for updates. Reinstallation should also do the trick. Cheers!

2 Likes

Thanks for accepting the PR and pushing the changes!

It’s very likely I’ve missed some things, so don’t hesitate to report any problems.

Note that these changes should all be additions: it’s very likely that much of the code no longer does anything (there are still a bunch of rules for the summary pages that no longer exist, for example).

The updates were also a bit of a hack, but we wanted to get something out quickly.

I’ve been using this code for several days without any major issues.

The Wanikani folks bumped the size of the primary meaning in the info section slightly after user complaints about the update, but I actually strongly prefer the new WKED styling in this version (shown here). I don’t think WK went far enough. Much larger, bolder, and highlighted color improves the UX considerably.

2 Likes