Atom editor scrollbar size/color

Question

I'm using Atom to develop in php but for me, but I have an issue with the editor, I use One Dark theme but I try to change the color and the size of right scrollbar of the opened file because is small and hard to see for me

I try this info Change atom-text-editor pane scrollbar colours

But I don't see any changes.

Any ideas? Thanks

Answer 1

UPDATE: The below answer applies to Atom < 1.13. Starting with Atom 1.13 the shadow dom was abondoned and the example should work as the original poster had put it (that is without the ::shadow selector.

For Atom up to version 1.12: Atom uses shadow DOM for the editor, that might be the reason it does not work for you. To style the scrollbar for both the editor and the tree view try this:

.tree-view-resizer, atom-text-editor::shadow  {
  ::-webkit-scrollbar {
    background-color: #262626;

    &-track {}

    &-thumb {
      background-color: #404040;

      &:window-inactive {
        background-color: rgb(116, 115, 105);
      }
    }

    &-corner {
      background-color: #262626;
    }
  }
}

Answer 2

1. Select "File" -> "Stylesheet...".
2. Add code to below and save.

.scrollbars-visible-always {
  ::-webkit-scrollbar {
    width: 35px;
    height: 12px;
  }
}

 // has to be bigger than webkit-scrollbar
.vertical-scrollbar {
  width: 35px !important;
}

// has to be bigger than webkit-scrollbar
.horizontal-scrollbar {
  height: 30px !important;
}