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;
}


#24

For Atom version 1.32.0 running on Ubuntu 18.04.1 Desktop, I had to use the following to set the scrollbar widths and colors. For reference, my UI Theme is One Dark and my Syntax Theme is Solarized Light:

.scrollbars-visible-always {

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	border-radius: 6px;
	background: #6C6760;
}

::-webkit-scrollbar-thumb {
	border-radius: 6px;
	border-color: #ffffff;
}

atom-text-editor ::-webkit-scrollbar-track {
	border-radius: 6px;
	background: #687184;
}

atom-text-editor ::-webkit-scrollbar-thumb {
	border-radius: 6px;
	border-color: #C6C697;
	background: #C6C697;
}

}