Change the color and width of editor's sidebar


#1

Hello,

How can I change the color and width of the scrolling bar?

I’ve tried adding the following style to the styles.less:

::-webkit-scrollbar {
width: 18px;
height: 18px;
background: #ff0000;
}

Re-opended the editor, but no change.

What am I missing? Thanks!


#2

You can use the following:

::-webkit-scrollbar {
  &-track { /* this is the "background" */ }
  &-corner { /* this is where the horizontal and the vertical scrollbar overlap, you probably don't need this */ }
  &-thumb { /* this is the thing you can drag around */ }
}

This won’t work, however, for the scrollbars inside the text editor, because they are in a shadow DOM. To fix this you can replace the first line with /deep/ ::-webkit-scrollbar {

Hope this helps :smile:


#3

Hi Olmo,

I followed your suggestion, placed the /deep/ combinator in front of the ::-webkit, but no luck. Still can’t change the color of the scrolling bar.

This is the style I want:

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

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 3px;
background: rgba(0,0,222,0.2);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

Any thoughts?

Thanks!


#4

I’m sorry, the /deep/ should be prepended by another selector… This works for me:

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

  &-track {
    border-radius: 3px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  }

  &-thumb {
    background-color: rgba(0, 0, 222, .2);
    border-radius: 3px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);

    &:window-inactive {
          background-color: rgba(255, 0, 0, .4);
        }
  }
}

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


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


#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


#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