diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 124bd8c3..c5abd57a 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -131,6 +131,25 @@ body p {
`
}
+const scrollBarStyle = `
+::-webkit-scrollbar {
+ width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+ 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);
+}
+`
+
const { shell } = require('electron')
const OSX = global.process.platform === 'darwin'
@@ -295,6 +314,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)
@@ -303,6 +337,9 @@ export default class MarkdownPreview extends React.Component {
+
`
CSS_FILES.forEach((file) => {
diff --git a/browser/main/global.styl b/browser/main/global.styl
index 7025163f..8f3216ef 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -15,6 +15,12 @@ body
font-weight 200
-webkit-font-smoothing antialiased
+::-webkit-scrollbar
+ width 12px
+
+::-webkit-scrollbar-thumb
+ background-color rgba(0, 0, 0, 0.15)
+
button, input, select, textarea
font-family DEFAULT_FONTS
@@ -85,9 +91,11 @@ modalBackColor = white
absolute top left bottom right
background-color modalBackColor
z-index modalZIndex + 1
-
+
body[data-theme="dark"]
+ ::-webkit-scrollbar-thumb
+ background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-dark-backgroundColor
@@ -128,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
@@ -135,9 +145,10 @@ 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
.sortableItemHelper
color: $ui-monokai-text-color
-