[Userstyle] WaniKani Elementary Dark

To fill some time at lower levels after nuking my account, I put together a bunpro inspired dark theme for WaniKani.

Feel free to check it out and leave some feedback!

More screenshots can be found on git

15 Likes

Ooooh! Fresh meat!

ドモども

It’s nice to have an alternative to breeze dark. Thank you.


Nicely done! Hover effects and everything. It seems to play well with everything I use at first glance, except for the ultimate timeline plugin. All of the official pages I’ve looked at this far look great (including the radical/kanji/vocabulary summary pages which were a problem with breeze dark for a while).

Ultimate timeline with Elementary Dark:

Ultimate timeline with Breeze Dark:

Note the text icons in upper left, too.


Not a single !important – you’re my hero!

One thing that would be really nice if you’re willing would be to use custom properties for all the unique rgb values:

/* Top of file */
body {
--radical-color: #9d4745
--kanji-color: #56638a
--vocab-color:  #58b09c
--extra-color: #d7af70
...
}

.progress-entry .radical-icon, section.srs-progress ul li:first-child, .navigation-shortcut a span,
    .popover.srs .popover-content ul li:first-child {
        background: var(--radical-color);
}

...
4 Likes

Holy, thats a bunch of feedback way sooner than I expected, thanks! I’m glad most of it works, I was a bit worried, since I never shared any css amalgamations of mine before.

I myself don’t use any plugins atm, so I knew going in, the compatibility would be iffy, but I could take a look at it tommorow morning. If there are others that misbehave add them to the list and I will go through them.

Custom colors are a neat idea, I will definitely do that as some point in the future, not sure when tho.

3 Likes

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:

3 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