CODEWITHSUNDEEP
htmlcssatom-editor
user1213904
user1213904

Reputation: 1940

Change atom-text-editor pane scrollbar colours

I have just switched to atom from sublime text and tried to apply my usual themes. Unluckily the theme that I use (spacegray eighties sublime port) does not incorporate the correct theme for the scrollbars. I managed to fix the look of the scrollbars in the tree-view panel. However, I cannot apply the same to the atom-text-editor for some reason. My styles.less is the following:

atom-text-editor {
  // Apply same scrollbar color fix.
}

// Scrollbar color fix for SpaceGray
::-webkit-scrollbar {
  background-color: #262626;

  &-track {}

  &-thumb {
    background-color: #404040;

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

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

And here a preview of my problem:

enter image description here enter image description here

I tried putting the same ::-webkit-scrollbar CSS into the atom-text-editor with !important statements, but with no luck.

Upvotes: 2

Views: 2903

Answers (3)

S. Leupold
S. Leupold

Reputation: 73

In Atom 1.18.0 the following works for me for all scrollbars:

::-webkit-scrollbar {
    width: 50px;
    height: 18px;

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

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

// for new opened files
.vertical-scrollbar {
    width: 50px !important;
}

Upvotes: 4

phw
phw

Reputation: 430

Actually this does not seem to work anymore for current versions of Atom. With the following code I was able to style both the scrollbar in the tree view and in the editor windows:

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

Upvotes: 3

idleberg
idleberg

Reputation: 12882

You were close, you have to wrap your styles inside .scrollbars-visible-always:

.scrollbars-visible-always {
  ::-webkit-scrollbar {
    background-color: #262626;    

    &-track {}    

    &-thumb {
      background-color: #404040;    

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

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

Upvotes: 0

Related Questions