diff --git a/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts b/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts
index aff8334b64c93546225981cd137d349cd2adfed7..11d5326512873d38fde184214e6a535c1a04cc09 100644
--- a/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts
+++ b/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts
@@ -13,6 +13,7 @@ import { ViewContext } from 'vs/editor/common/view/viewContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/common/view/renderingContext';
 import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
+import { getThemeTypeSelector } from "vs/platform/theme/common/themeService";
 
 export class EditorScrollbar extends ViewPart {
 
@@ -33,7 +34,7 @@ export class EditorScrollbar extends ViewPart {
 		let scrollbarOptions: ScrollableElementCreationOptions = {
 			canUseTranslate3d: editor.canUseTranslate3d,
 			listenOnDomNode: viewDomNode.domNode,
-			className: 'editor-scrollable' + ' ' + editor.viewInfo.theme,
+			className: 'editor-scrollable' + ' ' + getThemeTypeSelector(context.theme.type),
 			useShadows: false,
 			lazyRender: true,
 
@@ -120,10 +121,8 @@ export class EditorScrollbar extends ViewPart {
 	// --- begin event handlers
 
 	public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
-		const editor = this._context.configuration.editor;
-
-		this.scrollbar.updateClassName('editor-scrollable' + ' ' + editor.viewInfo.theme);
 		if (e.viewInfo || e.canUseTranslate3d) {
+			const editor = this._context.configuration.editor;
 			let newOpts: ScrollableElementChangeOptions = {
 				canUseTranslate3d: editor.canUseTranslate3d,
 				handleMouseWheel: editor.viewInfo.scrollbar.handleMouseWheel,
@@ -139,6 +138,10 @@ export class EditorScrollbar extends ViewPart {
 	public onScrollChanged(e: viewEvents.ViewScrollChangedEvent): boolean {
 		return true;
 	}
+	public onThemeChanged(e: viewEvents.ViewThemeChangedEvent): boolean {
+		this.scrollbar.updateClassName('editor-scrollable' + ' ' + getThemeTypeSelector(this._context.theme.type));
+		return true;
+	}
 
 	// --- end event handlers
 
diff --git a/src/vs/platform/theme/common/themeService.ts b/src/vs/platform/theme/common/themeService.ts
index 37f6eb59b7c0a505bbf71f0fb73201b201520103..64e028e6215df800756db17ca76632bde4da877e 100644
--- a/src/vs/platform/theme/common/themeService.ts
+++ b/src/vs/platform/theme/common/themeService.ts
@@ -19,6 +19,14 @@ export const LIGHT = 'light';
 export const HIGH_CONTRAST = 'hc';
 export type ThemeType = 'light' | 'dark' | 'hc';
 
+export function getThemeTypeSelector(type: ThemeType): string {
+	switch (type) {
+		case DARK: return 'vs-dark';
+		case HIGH_CONTRAST: return 'hc-black';
+		default: return 'vs';
+	}
+}
+
 export interface ITheme {
 	readonly type: ThemeType;