Change the color and width of editor's sidebar


#21

Thank you for this thread it was very helpful. Here are the settings I used. To be clear for any newbie on how to do this, select File -> Stylesheet from the menu which opens your ~/.atom/styles.less file in an editor window. This is what I used to create an always visible and slightly wider scrollbar with colors that are similar to other programs like web browsers:

.scrollbars-visible-always {
/deep/ ::-webkit-scrollbar {
width: 16px;
height: 15px;

    &-track {
        border: 0px;
        border-radius: 0px;
        // background-color: transparent !important;
        background-color: hsl(0, 0%, 90%) !important;
    }

    &-thumb {
        // background-color: rgba(111, 111, 111, 0.2) !important;
        background-color: hsl(0, 0%, 70.2%) !important;
        border: 0px;
        border-radius: 0px;
    }
}

}

I prefer the hsl values over rgba since it is easier to adjust the grey level of hsl values by just altering the third value. You can use a site like colorizer.org to select values.


#22

Atom no longer uses a shadow DOM, and you should remove the /deep/ from any selectors that contain it.


#23

Besides removing /deep/, I also had problems with resizing the main scrollbar beyond a certain size (~20px), and had to add:

.vertical-scrollbar {
width: 25px !important;
}

Full css (not including &track/&thumb):

.scrollbars-visible-always {
::-webkit-scrollbar {
width: 25px !important;
height: 25px !important;
}
}
.vertical-scrollbar {
width: 25px !important;
}