Added new styling for permanent scrollbars.

index.less

@@ -20,6 +20,7 @@
 @import "styles/tooltips.less";
 @import "styles/tree-view.less";
 @import "styles/tree-view.project-root.less";
+@import "styles/scrollbars.less";
 @import "styles/settings-view.less";
 @import "styles/project-find-results.less";
 @import "styles/plugins.less";

lib/main.js

@@ -4,7 +4,8 @@ import toggleClassName from './helpers/toggle-class-name';
 
 const classNames = {
   'native-ui-autoResizeTabs': atom.config.get('native-ui.tabs.autoResizeTabs'),
-  'native-ui-macTransparency': atom.config.get('native-ui.ui.macTransparency')
+  'native-ui-macTransparency': atom.config.get('native-ui.ui.macTransparency'),
+  'native-ui-seamlessScrollbars': atom.config.get('native-ui.ui.seamlessScrollbars')
 };
 
 if (atom.config.get('native-ui.ui.macTransparency')) {

package.json

@@ -41,6 +41,12 @@
           "description": "Enable transparency for the sidebars.",
           "type": "boolean",
           "default": true
+        },
+        "seamlessScrollbars": {
+          "title": "Seamless editor scrollbars",
+          "description": "Use scrollbars that blend into the editor's color scheme when macOS is permanently showing scrollbars. This setting will only take effect when macOS is configured to permanently show scrollbars (instead of auto hiding them by default).",
+          "type": "boolean",
+          "default": false
         }
       }
     }

styles/scrollbars.less

@@ -0,0 +1,94 @@
+// Definitions for 'permanent' scrollbars. These styles are only used when macOS is
+// not auto hiding scrollbars.
+
+@import "syntax-variables";
+@import "ui-variables";
+
+// Default, always visible, scrollbars that match the macOS design language:
+.scrollbars-visible-always {
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: @scrollbar-background-color;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: @scrollbar-background-color;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 7px;
+    border: 3px solid @scrollbar-background-color;
+    background: @scrollbar-color;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:vertical:active,
+  ::-webkit-scrollbar-thumb:horizontal:active {
+    background: @scrollbar-active-color;
+  }
+
+  // Always hide the trouble-making corner:
+  .scrollbar-corner {
+    display: none;
+  }
+
+  // Ensures the scrollbar appears on top of other content such as the preferred
+  // line length marker line:
+  .vertical-scrollbar, .horizontal-scrollbar {
+    z-index: 1000 !important;
+  }
+
+  // When the scrollbars are not visible, remove them from the DOM so highlights
+  // will cover the entire editor (instead of stopping where the invisible
+  // scrollbars are):
+  .vertical-scrollbar[style*="visibility: hidden"],
+  .horizontal-scrollbar[style*="visibility: hidden"] {
+    display: none;
+    display: none;
+  }
+
+  // When the vertical scrollbar is visible, make it span the height of the entire window:
+  .vertical-scrollbar:not([style*="visibility: hidden"]) {
+    bottom: 0 !important;
+  }
+
+  // If only the horizontal scrollbar is visible, make it span the entire window:
+  .vertical-scrollbar[style*="visibility: hidden"] ~ .horizontal-scrollbar:not([style*="visibility: hidden"]) {
+    right: 0 !important;
+  }
+
+  // When both scrollbars are visible, position the horizontal scrollbar to the left of the vertical one:
+  .vertical-scrollbar:not([style*="visibility: hidden"]) ~ .horizontal-scrollbar:not([style*="visibility: hidden"]) {
+    right: 14px !important;
+  }
+}
+
+
+// Optional seamless scrollbars based on the current syntax theme colors, designed to blend into the editor:
+.native-ui-seamlessScrollbars .scrollbars-visible-always {
+  atom-text-editor {
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      border: 1px solid @seamless-scrollbar-border-color;
+      background: @seamless-scrollbar-color;
+    }
+
+    ::-webkit-scrollbar-thumb:vertical:active,
+    ::-webkit-scrollbar-thumb:horizontal:active {
+      background: @seamless-scrollbar-active-color;
+    }
+  }
+}

styles/ui-variables.less

@@ -94,6 +94,23 @@
 @tree-view-border-color              : @tab-bar-border-color-transparent;
 @tree-view-background-color-highlight: linear-gradient(to right, rgba(0,0,0, 0.18), rgba(0,0,0, 0.15), rgba(0,0,0, 0.22));
 
+@scrollbar-color                     : hsl(0, 0%, 76%);
+@scrollbar-background-color          : hsl(0, 0%, 98%);
+@scrollbar-active-color              : hsl(0, 0%, 49%);
+
+@syntax-background-lightness         : lightness(@syntax-background-color);
+.seamless-scrollbar-lightness() when (@syntax-background-lightness >= 50%) {
+  @seamless-scrollbar-color          : fade(darken(@syntax-background-color, 32%), 20%);
+  @seamless-scrollbar-border-color   : fade(darken(@syntax-background-color, 64%), 20%);
+  @seamless-scrollbar-active-color   : lighten(@seamless-scrollbar-color, 50%);
+}
+.seamless-scrollbar-lightness() when(@syntax-background-lightness < 50%) {
+  @seamless-scrollbar-color          : fade(lighten(@syntax-background-color, 32%), 20%);
+  @seamless-scrollbar-border-color   : fade(lighten(@syntax-background-color, 64%), 20%);
+  @seamless-scrollbar-active-color   : darken(@seamless-scrollbar-color, 50%);
+}
+.seamless-scrollbar-lightness();
+
 @ui-site-color-1                     : @background-color-success; // green
 @ui-site-color-2                     : @background-color-info; // blue
 @ui-site-color-3                     : @background-color-warning; // orange