Product navigation arrows not accessible - add white background behind arrows

Product navigation arrows are black so appears fine on images with lighter backgrounds but on darker background they're not accessible.

A simple solution would be to add a white box behind it (see attached)

Is there a way to add custom code to implement this?

Extra bonus:

• make arrows bolder
• move arrows closer to edge

You can use this code to Website > Website Tools > Custom CSS. If it doesn't work, you can share link to a product, we can check easier

/* Product arrows */
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-width: 3px 3px 0 0 !important;
    border-color: white !important;
    width: 2vw;
    height: 2vw;
}

Thanks tuanphan, but unfortunately it didn't work.

Here's the link to a product: https://www.jonoyuen.com/mutantmade/p/mm-round-logo

I had also previously tried a few threads that you've replied to in the past and none of those solutions worked either. 

The code above just thickened the arrows and made them white. So now you can't see it on images with light backgrounds.

Is there a way to add a solid box behind it? That way you can see it not matter what the background is behind it.

Tried updating the background-color but it's not a rectangular shape behind the arrow. It looks like the arrows are made from a rotated square shape.

Any suggestions Tuanphan?

Thanks Tuanphan

Not exactly what I'm after but I've just changed the color of the arrows to a grey that's visible on both light and dark backgrounds.

Thanks for your help

So did you solve or still need help?