When I developed software using Electron, I found that its built-in scrollbar was not very attractive:

Electron’s built-in scrollbar style

I decided to customize the scrollbar style. My CSS style and results are as follows:

.vertical-scroll-area::-webkit-scrollbar {
  width: 10px;
  background-color: white;
  border-radius: 10px;
}

.vertical-scroll-area::-webkit-scrollbar-thumb {
  background-color: #555555;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}

.vertical-scroll-area::-webkit-scrollbar-button:vertical:single-button:start {
  width: 10px;
  height: 10px;
  background: url('../../assets/scroll-up.svg') center 2px no-repeat;
  background-size: 12px 12px;
}

.vertical-scroll-area::-webkit-scrollbar-button:vertical:single-button:end {
  width: 10px;
  height: 10px;
  background: url('../../assets/scroll-down.svg') center -2px no-repeat;
  background-size: 12px 12px;
}

My custom scrollbar style

Until now, everything has been very smooth, but I hope my program can have light mode. At this time, I need to modify the color of the scroll bar, background color, and slider color, which are all easy to set. However, the triangle button is an SVG image and can be set through the background URL. I don’t want to create two more SVG images. I hope to be able to change their colors anytime and anywhere. So, I thought of using a mask to achieve my needs. I wrote the following code:

.vertical-scroll-area::-webkit-scrollbar-button:vertical:single-button:start {
  width: 10px;
  height: 10px;
  mask-image: url('../../assets/scroll-up.svg');
  mask-size: 12px 12px;
  mask-repeat: no-repeat;
  mask-position: center;
  background: red;
}

But the mask failed:

Mask failed

I initially thought it was an electron or some other reason, so I created another test element and used the same CSS style:

Mask works properly on test elements:

The mask of the test element is working properly