Scrollbar color in Opera

Question

I am trying to change the background color of a vertical scrollbar on a div, so it should not be white in the dark mode in my react app.

None of the webkit-based styling solutions I could find worked in Opera. Neither could I find a way with react-custom-scrollbars-2 package. I would be fine with any solution, be it CSS or JavaScript-based.

Here is a sandbox to play with.

Answer 1

Styling scrollbars always seems a not-so-simple task. Personally, I always prefer -webkit-scrollbar and -webkit-scrollbar-thumb for implementing this. Here is the CSS for the same:

::-webkit-scrollbar {
  width: 20px;
  /* background-color: #custom_bg_color; */
}

::-webkit-scrollbar-thumb {
  background-color: #6d6d6d;
  /* border-radius: 10px; */
  /* height: 20px; */
}

Answer 2

It can be done using webkit styling itself.

:root {
  --bg-color: #282c34; // here set a variable to represent the bg color
}

body {
  background-color: var(--bg-color); // use the pre-defined color variable
  color: white;
}

//override the scrollbar
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color); //here set scrollbar bg-color
}

::-webkit-scrollbar-thumb {
  background: #888; // here you can set scrollbar thumb color
}