Change the color and width of editor's sidebar

Hi Olmo,

No joy yet!

I’ve attached a screen capture of the code within styles.less

UPDATE: It works as it changes the color of scrolling bar on the Tree View. How can I get it to work on the Editor View?

@braver, do you have time to take a look at this too?

This should be enough to change all scrollbars:

.scrollbars-visible-always {
  /deep/ ::-webkit-scrollbar {
    width: 30px;
    height: 30px;
  }
}

To have this affect the editor window, apparently you need to trigger a redraw, i.e. switch tabs. Scrolling in the Atom editor is entirely synthetic, so it has stuff like that. I don’t think it allows different size scrollbars for the editor, there are inline styles that are probably derived from elsewhere, but different colors does work.

2 Likes

Changing scrollbar size in the editor works just fine for me…

Anyway, I copy-pasted my snippet, and like @braver mentions, I had to switch tabs for the style to kick in, but it worked fine after that.

1 Like

We’re almost there!

The width and height of the Editor View is working accordingly now, but the colors wont follow. The following CSS affects only the Tree View’s scrolling bar colors.

Try adding the !important flag to some properties, maybe the style gets overridden by your UI or syntax theme…

To style the Editor View’s scrollbar try adding atom-text-editor as follows:

.scrollbars-visible-always atom-text-editor /deep/ ::-webkit-scrollbar {
  // properties here
}

That works for me to control the size, colors etc.

Solved!!

Thanks Olmo, the > !important flag did it!

Also, thank you Koen, Philippe and Lee for jumping in and helping out.

Here’s the solution that worked for me:

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

&-track {
  border: 0px;
  border-radius: 0px;
  background-color: rgba(179, 179, 179, 1) !important;
}

&-thumb {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 0px;
  border-radius: 0px;
}

}
}

Best,
Rubem

7 Likes

Can someone indicate which file if being edited?

This doesn’t change the colors for me. I put that code in base.less.

styles.less, or better, if you do ctrl(or cmd)+shift+p and type style, you’ll see option Application: Open your stylesheet. That’s the file you need to put the code snippet in.

Juniorlinn’s snippet, installed as specified by emilcleslar, worked recently. It does not, however, work in Atom 1.12.7 (on OS X). The update did not wipe out styles.less, the snippet is still there.

It works just fine for me on 1.12.7. Does it function if you open Atom from the command line with atom --safe?

You are right, it’s something other than new 1.12.7 problem. Reinstalling my previous version (1.11.2) did not help, even when launching via “atom --safe”, after doing these:
atom --clear-window-state
apm unlink --all

It’s ok, I’ll just switch to a light theme where scroll bars are actually visible.

Thanks everybody! Worked for me fine. Coming from SublimeText 3 I adapted it a bit to make it a broad scrollbar on the right so you can easily grip it. Being almost transparent it does not obstruct the view:
.scrollbars-visible-always {
/deep/ ::-webkit-scrollbar {
width: 100px;
height: 15px;

&-track {
  border: 0px;
  border-radius: 0px;
  background-color: transparent !important;
}

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

}
}

This makes it possible for my shaky hand to keep the mouse on the scroll bar. Thanks

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.

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

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

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

}