Fix term background and scrollbar

lib/components/style-sheet.js

@@ -9,7 +9,7 @@ export default class StyleSheet extends React.PureComponent {
       fontFamily,
       fontSmoothing,
       foregroundColor,
-      backgroundColor
+      borderColor
     } = this.props
 
     return (
@@ -17,10 +17,10 @@ export default class StyleSheet extends React.PureComponent {
         __html: `
           .terminal {
             ${foregroundColor ? `color: ${foregroundColor};` : ''}
-            ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
             ${fontFamily ? `font-family: ${fontFamily};` : ''}
             ${fontSize ? `font-size: ${fontSize}px;` : ''}
             ${fontSmoothing ? `-webkit-font-smoothing: ${fontSmoothing};` : ''}
+            background: transparent;
             font-feature-settings: "liga" 0;
             position: relative;
             user-select: none;
@@ -121,7 +121,7 @@ export default class StyleSheet extends React.PureComponent {
           }
 
           .terminal .composition-view {
-            background: #000;
+            background: transparent;
             color: #FFF;
             display: none;
             position: absolute;
@@ -134,8 +134,7 @@ export default class StyleSheet extends React.PureComponent {
           }
 
           .terminal .xterm-viewport {
-            /* On OS X this is required in order for the scroll bar to appear fully opaque */
-            background-color: #000;
+            background: transparent;
             overflow-y: scroll;
           }
 
@@ -2247,6 +2246,18 @@ export default class StyleSheet extends React.PureComponent {
             background-color: #eeeeee;
           }
 
+          ::-webkit-scrollbar {
+            width: 5px;
+          }
+          ::-webkit-scrollbar-thumb {
+            -webkit-border-radius: 10px;
+            border-radius: 10px;
+            background: ${borderColor};
+          }
+          ::-webkit-scrollbar-thumb:window-inactive {
+            background: ${borderColor};
+          }
+
           ${customCSS}
         `
       }} />

lib/components/terms.js

@@ -126,7 +126,7 @@ export default class Terms extends Component {
         fontFamily={this.props.fontFamily}
         fontSmoothing={this.props.fontSmoothing}
         foregroundColor={this.props.foregroundColor}
-        backgroundColor={this.props.backgroundColor}
+        borderColor={this.props.borderColor}
       />
     </div>);
   }