[Userstyle] WaniKani Pastel

WaniKani API And Third-Party Apps
1

Hi! I don’t post here much, but I figured on the off-chance that this would help anyone else it wouldn’t hurt to put it out there.

backstory

The monitor of the aging laptop I’m using right now happens to REALLY not like bright colours, and WK is a particularly bad offender on that front, so it ends up… not so nice to look at. To save my monitor (and my eyes) I cobbled this together. As such, it’s pretty much made exclusively for me- unfortunately it may not deliver an amazing user experience for people with normal monitors haha

image
image1333×750 180 KB

It’s nothing too fancy, just a style that makes WK’s vibrant colours a little more muted. Some text can be hard to read, particularly on the Enlightened/Radical cyan, so if it’s not for you that’s understandable! I thought I’d put it up just in case.

  • Disclaimer
    I pretty much don’t know any CSS, I made this style by just copying the WK styling in inspect element and changing the colour codes, I have no idea what I’m doing. Regardless though, I’ve been using it myself for months and my WK hasn’t exploded yet, so it -should- work!

Installation link
You’ll need a browser extension to use it - I’m not very familiar with the different ones, I’m afraid, but the one I use for my Chrome is called Stylus!

12 Likes
2

Is there a way in CSS to put like a black border around it?

3

Yes, with text shadow

3 Likes
4

I think the kanji and text in WaniKani already have text shadow - otherwise the text wouldn’t be visible at all. One option might be to make the shadows more prominent in this case?

5

Indeed, or just making the text itself a different colour

6

That’s a good idea! I tried it, but it kind of applies to EVERY element, not just the ones that were hard to read- I’m sure someone with more experience could do it right, but it’s a mystery to me haha

1 Like
7

I have eyesight problems and this color scheme may actually work better for me. I’ll try it later. Thanks for sharing!

2 Likes
8

You seem to be familiar enough with the elements panel, so I think you can do this! Just like you copied the styling you can select elements with poor legibility and just add text shadow to an existing CSS rule

1 Like
9

this is so cute omg

1 Like