Change the color and width of editor's sidebar

#5

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?

#6

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

#7

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.

3 Likes
#8

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
#9

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.

#10

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

#11

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.

#12

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
#13

Can someone indicate which file if being edited?

#14

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

#15

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.

#16

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.

#17

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

#18

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.

#19

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

}
}

#20

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

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

}