How can I change the color of the custom scrollbar?

To customize a scrollbar you will need to create a custom CSS class like .custom-scrollbar or reference an existing css class and add it to your store.

Example

.custom-scrollbar::-webkit-scrollbar {
  height: 0.75rem !important;
  background-color: #f8f8f8 !important;
  border-radius: 2rem;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #5fad56 !important;
  border-radius: 2rem;
}

1. Create a custom stylesheet.

2. Add custom css to manipulate scroll to a new css class or existing css class.

3. Add css class to Components if a class does not already exist.

See https://developer.chrome.com/docs/css-ui/scrollbar-styling for more information on customizing scrollbars with CSS

See https://www.w3schools.com/css/css_overflow.asp for adding overflow to elements to display a scrollbar.