Skip to content

Instantly share code, notes, and snippets.

@james2doyle
Created February 27, 2014 22:12
Show Gist options
  • Save james2doyle/9260736 to your computer and use it in GitHub Desktop.
Save james2doyle/9260736 to your computer and use it in GitHub Desktop.
nice fonts and scrollbars in the Atom editor!
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
.tree-view-resizer, .editor {
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-track {
background-color: #303030;
}
::-webkit-scrollbar-thumb {
background-color: lighten(#303030, 15%);
}
}
@rkuykendall
Copy link

Thank you! For anyone new to Atom (like myself), paste this into Atom > Open Your Stylesheet.

YES, YOU GET A STYLESHEET! This editor is awesome.

@engineer
Copy link

Great combination :)

@golubitsky
Copy link

This is great, but on my system it only works so long as I don't switch to another tab. As soon as I switch from the first tab opened in Atom, the scrollbars revert. Any ideas?

I'm using version 0.142.0 in Ubuntu 14.04

@abdobouna
Copy link

This is awesome! here is my version 😃

.tree-view-resizer, .editor {
  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.1);
    border-radius: 3px;

    &:hover {
      background: rgba(255,255,255,.2);
    }
  }
}

@developit
Copy link

@nycdotnet
Copy link

Thanks for this. Used it in redmond-ui

@redaktor
Copy link

just wanted to mention that syntax might have changed –
in 1.5 i am using

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

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

    &-thumb {
      background-color: #FF7A00 !important;
      border: 0px;
      border-radius: 0px;
    }
  }
}

black / orange

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment