From 7bfb094a40eae4661ca8ec516e08ec636791f12c Mon Sep 17 00:00:00 2001
From: Junyoung Choi <fluke8259@gmail.com>
Date: Fri, 6 Jul 2018 22:07:06 +0900
Subject: [PATCH] use lighter color for scroll bar

---
 browser/components/MarkdownPreview.js | 27 +++++++++++++++++++++++++--
 browser/main/global.styl              |  9 +++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 0348996d..f2157882 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -132,7 +132,15 @@ const scrollBarStyle = `
 }
 
 ::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.15);
+}
+`
+const scrollBarDarkStyle = `
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.3);
 }
 `
@@ -301,6 +309,21 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
+  getScrollBarStyle () {
+    const {
+      theme
+    } = this.props
+
+    switch (theme) {
+      case 'dark':
+      case 'solarized-dark':
+      case 'monokai':
+        return scrollBarDarkStyle
+      default:
+        return scrollBarStyle
+    }
+  }
+
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
@@ -310,7 +333,7 @@ export default class MarkdownPreview extends React.Component {
       <link rel="stylesheet" id="codeTheme">
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <style>
-        ${scrollBarStyle}
+        ${this.getScrollBarStyle()}
       </style>
     `
 
diff --git a/browser/main/global.styl b/browser/main/global.styl
index 9a967085..8f3216ef 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -19,8 +19,7 @@ body
   width 12px
 
 ::-webkit-scrollbar-thumb
-  box-shadow inset 0 0 6px rgba(0, 0, 0, 0.3)
-  background-color rgba(0, 0, 0, 0.3)
+  background-color rgba(0, 0, 0, 0.15)
 
 button, input, select, textarea
   font-family DEFAULT_FONTS
@@ -95,6 +94,8 @@ modalBackColor = white
 
 
 body[data-theme="dark"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
   .ModalBase
     .modalBack
       background-color $ui-dark-backgroundColor
@@ -135,6 +136,8 @@ body[data-theme="dark"]
   z-index modalZIndex + 5
 
 body[data-theme="solarized-dark"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
   .ModalBase
     .modalBack
       background-color $ui-solarized-dark-backgroundColor
@@ -142,6 +145,8 @@ body[data-theme="solarized-dark"]
     color: $ui-solarized-dark-text-color
 
 body[data-theme="monokai"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
   .ModalBase
     .modalBack
       background-color $ui-monokai-backgroundColor