Basic Dark Mode Theme

WaniKani API And Third-Party Apps
21

I really like this dark mode, thanks a lot for making it!
I made a small update to make it work better with the new lesson picker as well as the side / burger menu on mobile:

/*new lesson picker*/
.lesson-picker__section-content {
    background-color: #444;
}
.lesson-and-review-count__label {
    color: #fff;
    text-shadow: var(--text-shadow-dark);
}
/*burger menu for mobile*/
.sitemap {
    background-color: #333;
}

You are welcome to add it to your actual version, not sure if that would update it for anyone who has already installed it through stylus as I haven’t used it before this

1 Like
22

Thanks a lot!

Sorry I have been busy, but I’ll try and get an update out today. With regards to Stylus it’s meant to auto-update but in my experience I haven’t seen it work lol so reinstalling the theme might be necessary.

With the burger menu bit unfortunately I can’t add it as it changes the header background on desktop, if it was only mobile I could add it in. Glad it works well for you though.

23

Update is out, let me know if you have any feedback.

24

Oh, I didn’t even notice that, thanks for pointing it out!
I changed the rule on line 55 to include the sitemap class, which should fix it:

.global-header, .sitemap {
    background-image: none;
    background-color: #111;
}
25

Hey, I love your Dark Mode Theme!
Just wanted to let you know they updated the colours of the Review Forecast, so the userstyle needs an update too. Would be nice if you could fix it!

2 Likes
26

Thanks! Using it on Android Firefox. It’ll be helpful for late night reviews.

27

Just installed it after opening WaniKani at 5 AM this morning.

私の目はとてもありがたいです🙇‍♀️

2 Likes
28

Thank youuuuuuu my eyes are no longer burning lol. Night shift can only do so much. :pray:

1 Like
29

Love this theme, thank you.

I created additional styling for the Ultimate Timeline & Tofugu article userscripts below. It can be added to this theme or separately.

#timeline svg .bkgd {
    fill: #333;
}

#timeline > .link {
    color: #ddd;
}

#timeline svg .major, #timeline svg .minor {
    fill: #ddd !important;
}

.tofugu-latest {
    background-color: #333;
}

.tofugu-article a, .tofugu-age {
    color: #ddd;
}

.tofugu-article a:visited {
    color: #aaa;
}
1 Like
30

I’m new to API’s how would I go about installing this Dark Mode on my WaniKani page?

31

Get Stylus: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
Then install: WK Basic Dark Mode — UserStyles.world