is it possible to change the color of the scrollbar

[JuanAnayaDev]

Hello my question is simple, it is possible to change the color of the scrollbar to my liking

[KingSora]

Yes, you can change everything else as well with a little bit of CSS. You can read more about it in the documentation here: https://kingsora.github.io/OverlayScrollbars/#!documentation/styling

[KingSora]

@JuanAnayaDev in v2 I've introduced custom css properties aka. css variables for easier styling. You can give it a shot if you like: https://github.com/KingSora/OverlayScrollbars#styling

[01Kuzma]

@KingSora I'm not getting the point, trying to change the scrollbar's color and bg, but can't find the solution.

If I paste this code with changes into custom.css nothing changes...

.os-scrollbar {
  --os-size: 3px;
  --os-track-bg: #000;
    ...
}

Or it should be done in another way?
Thank you!

[KingSora]

@01Kuzma It seems like you're doing it right.. do you mind posting an example on jsfiddle? Then I can take a look what might be the problem

[01Kuzma]

@KingSora , sadly, it seems that I'm experiencing some kind of a bug. Plugin is not initializing anymore and custom styles are not applied. While the os-scrollbar classes are added.

[01Kuzma]

@KingSora thanks to your help I was able to properly init the library.
But the customization is working only with the !important rule.

I've to add it to these rules:

.os-scrollbar {      
  --os-track-bg: #312f38;       
  --os-handle-bg: #7faf34;    
  --os-handle-bg-hover: #b9dd3c;    
  --os-handle-bg-active: yellow;    
}

I'm placing this css code in my custom.css.
Or I should do it in another way?
Thank you!

[KingSora]

@01Kuzma its intended to use the css custom props and the scrollbars.theme option together like this:

.my-theme.os-scrollbar {
/* Your styles here..  */
}

and then if you want to apply this style to your instance you can do:

// use the options object when initializing
OverlayScrollbars(myElement, {
  scrollbars: {
    theme: 'my-theme'
  }
});
// or use .options for already initialized scrollbars
osInstance.options({
  scrollbars: {
    theme: 'my-theme'
  }
});

[01Kuzma]

@KingSora , thank you for the clarifications!

[KingSora]

No problem :)
If it works please mark my post as the answer

[01Kuzma]

@KingSora unfortunately I'm not a topic starter and don't have this button active :(
Maybe @JuanAnayaDev could mark it as the answer?

[abusch8]

I am also having issues with this, I'm using react and css modules. I defined my theme globally in my index.css:

.os-theme-custom.os-scrollbar {
  --os-handle-bg: red;
  --os-size: 5px;
}

And am applying it to the element as follows:

<ScrollOverlay className={styles.scrollOverlay} ref={tableScrollRef} events={{ scroll: () => scrollEvent.current?.() }} options={{ scrollbars: { theme: "os-theme-custom" } }} defer>

But nothing changes, I think that the documentation could be a little clearer on how to do this, a pretty big part of wanting to use this library is for the custom scrollbar styling.

[KingSora]

@abusch8 the problem with css-modules is probably that your selectors change. css-modules automatically change your class names to a hashed version so that you have no class name collisions. The solution should be something like this:

import styles from './my-styles.modules.css';
//...
<OverlayScrollbarsComponent options={{
  scrollbars: {
    theme: `${styles['os-theme-custom']}`
  }
}} />

But then it might be that all sub-selectors like .os-scrollbar will also change... It might be best to define these styles in a non css module file.

Thanks for the feedback, I'll improve the documentation with the contents of this discussion as soon as possible :)

[abusch8]

Sadly that still did not work for me. I came up with a different way to do it that doesn't involve the theme options:

.scroll-overlay > :global(.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle) {
  background-color: var(--scrollbar-color) !important;
  height: 5px;
  border-radius: 2.5px;
}

.scroll-overlay > :global(.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle):hover,
.scroll-overlay > :global(.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle):active {
  background-color: var(--scrollbar-color-active) !important;
}

[KingSora]

@abusch8 cool :) But in that case this should also work:

:global(.os-theme-custom.os-scrollbar) {
  /** your styles */
}

And then:

<OverlayScrollbarsComponent options={{
  scrollbars: {
    theme: `os-theme-custom`
  }
}}