Simplebar: Change scrollbar color

Created on 7 Jan 2020  路  3Comments  路  Source: Grsmto/simplebar

I notice sample's scrollbar has different color (like orange) compared to the default (dark grey).
How can I change the default scrollbar color?

question

Most helpful comment

Use simple css like this:

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    background-color: 'orange"
}

One of the samples uses a yellow/red gradient. You can achieve something similar like this:

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
       background-image: linear-gradient( yellow , red);
}

All 3 comments

Use simple css like this:

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    background-color: 'orange"
}

One of the samples uses a yellow/red gradient. You can achieve something similar like this:

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
       background-image: linear-gradient( yellow , red);
}

I added a section in the README about styling.
Hope that gives hints on how to style the scrollbar.
https://github.com/Grsmto/simplebar/tree/master/packages/simplebar#styling

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
background-color: 'orange"
}

The above did not work for me.

However, based on Grsmto's guidance...

This works:

.simplebar-track.simplebar-vertical {
    background-color: orange;
}

or

.simplebar-track{
    opacity: 0.3;
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

apopelyshev picture apopelyshev  路  7Comments

danielg42 picture danielg42  路  5Comments

JoshClose picture JoshClose  路  7Comments

barnu5 picture barnu5  路  5Comments

Aleksandr2015 picture Aleksandr2015  路  6Comments