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

1 Like
32

Many many thanks for this mode, I needed it so much! :man_bowing: :man_bowing:

1 Like
33

Beautiful theme! Huge improvement over Dark Reader’s generated dark theme (that also has a performance hit).

Big thanks!

1 Like
34

Thanks to everyone who’s showed their support over the past year with kind messages. It’s nice to know that other people have benefited from my little theme. I hope you all progress much more than me, it’s been a big year for me and I struggle so hard to keep my habits when there is so much change going on. I’m sure some people can relate. Happy new year to everyone, let’s try and do our reviews every day, even if it’s just a little.

4 Likes
35

Thanks, appreciated!

1 Like
36

ss+(2025-01-06+at+01.04.05)

I just noticed that this text is hard to read, by the way.

37

Oh, sorry I didn’t notice that. I’ll need to level up for that to pop up for me I think, I’m not sure which element it is. I’ll definitely fix it eventually.

2 Likes
38

hello, thanks for the dark mode! was just going to pop in here to write about this, the element is div.level-progress-bar__label

image
image3170×470 121 KB

1 Like
39

Yep should be good now, updated it a few days ago and also updated the script in the post as well. Thanks for the help.

1 Like
40

Fantastic theme, thank you!

1 Like