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 -