Github Atom hard to see scrollbars in One Dark theme

I have been using Github Atom quite a bit. The more I work in it, the more I feel the need to tweak it. Not out of boredom, but rather that some of its usability is actually annoying. One of the things I just was able to adjust to my satisfaction is the vertical scrollbars while using the One Dark theme. On a Linux Mint install, Atom's scrollbars were frustratingly difficult to use. It is not a problem when you're working with smaller text files, but if you work in large ones you will find yourself spending inordinate amounts of time trying to grab the scrollbar with the mouse.

Here is a hacked together styles.less (On Linux: Edit menu > Open Your Stylesheet... On Windows: File > Stylesheet...) CSS that will widen the scrollbars in both the tree view and editor with a well contrasted green-on-black color combo. As for a decently readable dark contrast syntax, you could try the Dark Plus (dark-plus-syntax) theme, which is neither too dark nor bright for editing HTML and the like.


@import "ui-variables";

.workspace {
  background-color: @app-background-color;
  border-top: 1px solid rgba(0, 0, 0, 0.9);
}

::-webkit-scrollbar {
    background-color: rgba(255, 255, 255, 1);
}

::-webkit-scrollbar-track {
    background: #eee;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #ccc;
}

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

    &-track {
      border: 0px;
      border-radius: 0px;
      background-color: rgba(0, 0, 0, 1) !important;
    }

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

Here's a screenshot showing the very usable wide bars (UI theme is Atom Dark and Syntax Theme is Dark Plus).

Comments

Popular posts from this blog

Domain registrar pricing comparison (2014)

How to block the Admiral anti ad-block detection message

usoclient.exe in Windows 10 wakes up my PC with Wake Source: Unknown