Removing drop shadows to reduce eye strain

Update: Solved! See userscript below to remove drop shadows completely from Wanikani. Definitely reducing my eye strain. Hope it can help others :wink:

// ==UserScript==
// @name        WaniKani No Shadows
// @description Remove shadows on WaniKani (to reduce eye strain)
// @version     1.0.0
// @include     https://www.wanikani.com/*
// @run-at      document-end
// @grant       none
// ==/UserScript==

var css = '* {text-shadow: none !important; box-shadow: none !important;}';
$('body').append('<style type="text/css">'+css+'</style>');

– orig post

Forgive my userscript newbie-ness. Is there an easy way to remove the drop shadows on Kanji & meaning for lesson & review pages.

If it’s easier to turn off drop shadows on all div elements… that would do the trick too :slight_smile:

Why? The drop shadows create significant eye fatigue for me (compared to using tsurukame which doesn’t have drop shadows). I can study longer and have higher accuracy on tsurukame, but I like the userscripts of wanikani.com

Thanks in advance for any tips. I’m already using several user scripts, so I can just paste a little code into one of them.

A userstyle might be more appropriate, but something like this should work in a script:

const character = document.querySelector('#character')
const meaning = document.querySelector('#meaning')
character.style.textShadow = 'none'
meaning.style.textShadow = 'none'

But it would probably be better to put that in a custom local script, rather than messing with one of your existing ones.

1 Like

That’s what I was trying, but couldn’t get it to work…

I’ll look into userstyles. That sounds promising :slight_smile:

If you want it in a script, you might need to wait for the DOM elements to be ready. I think some scripts trigger an event when the loading-screen div is hidden for example, and listen to that event before doing anything.

If you want it in a userstyle, you might need to use the same specificity as the original styles – the website uses overly specific selectors on all their styles (multiple IDs etc).

1 Like

Yeah, CSS is definitely more appropriate for this.

2 Likes

Ah! I solved this with the help of an old post about fonts selection from @rfindley

// ==UserScript==
// @name        WaniKani No Shadows
// @description Remove shadows on WaniKani (to reduce eye strain)
// @version     1.0.0
// @include     https://www.wanikani.com/*
// @run-at      document-end
// @grant       none
// ==/UserScript==

var css = '* {text-shadow: none !important; box-shadow: none !important;}';
$('body').append('<style type="text/css">'+css+'</style>');

A bit overkill perhaps, but it does the job!

thanks @skymaiden & @seanblue for pointing me in the right direction on this :slight_smile:

1 Like