diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css
index 578ee17ab92..d9606cb815d 100644
--- a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css
+++ b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css
@@ -233,11 +233,11 @@
 	background: rgba(200, 235, 255, .072);
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage.extra-dark .commands li button {
+.vs-dark .monaco-workbench > .part.editor > .content .welcomePageContainer.extra-dark .commands li button {
 	background: rgba(200, 235, 255, .042);
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage.extra-dark .commands li button:hover {
+.vs-dark .monaco-workbench > .part.editor > .content .welcomePageContainer.extra-dark .commands li button:hover {
 	background: rgba(200, 235, 255, .072);
 }
 
diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts
index d60458ba1d9..8c760ab3502 100644
--- a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts
+++ b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts
@@ -33,9 +33,7 @@ import { used } from 'vs/workbench/parts/welcome/page/electron-browser/vs_code_w
 import { ILifecycleService } from 'vs/platform/lifecycle/common/lifecycle';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { tildify } from 'vs/base/common/labels';
-import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
-import { Themable } from 'vs/workbench/common/theme';
-import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { isLinux } from 'vs/base/common/platform';
 
 used();
@@ -101,28 +99,6 @@ const reorderedQuickLinks = [
 	'showInteractivePlayground',
 ];
 
-class WelcomeTheming extends Themable {
-
-	constructor(
-		themeService: IThemeService,
-		private container: HTMLElement
-	) {
-		super(themeService);
-		this.update(themeService.getTheme());
-	}
-
-	protected onThemeChange(theme: ITheme): void {
-		super.onThemeChange(theme);
-		this.update(theme);
-	}
-
-	private update(theme: ITheme): void {
-		const background = theme.getColor(editorBackground);
-		const page = this.container.querySelector('.welcomePage') as HTMLElement;
-		page.classList.toggle('extra-dark', background.getLuminosity() < 0.004);
-	}
-}
-
 class WelcomePage {
 
 	private disposables: IDisposable[] = [];
@@ -250,8 +226,6 @@ class WelcomePage {
 				}
 			};
 		}));
-
-		this.disposables.push(new WelcomeTheming(this.themeService, container));
 	}
 
 	private pathEquals(path1: string, path2: string): boolean {
diff --git a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css
index 26e474a7ba9..176d0ae0e05 100644
--- a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css
+++ b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css
@@ -173,12 +173,17 @@
 
 .vs .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background,
 .vs .monaco-workbench > .part.editor > .content .walkThroughContent .glyph-margin {
-	background-color: #eee;
+	background:rgba(0,0,0,.08);
 }
 
 .vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background,
 .vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent .glyph-margin {
-	background-color: #111;
+	background: rgba(0, 0, 0, .4);
+}
+
+.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent.extra-dark .monaco-editor-background,
+.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent.extra-dark .glyph-margin {
+	background: rgba(200, 235, 255, .064);
 }
 
 .hc-black .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor {
diff --git a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts
index 289d84c6a6e..14de89be99c 100644
--- a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts
+++ b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts
@@ -38,6 +38,8 @@ import { Parts, IPartService } from 'vs/workbench/services/part/common/partServi
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { IMessageService, Severity } from 'vs/platform/message/common/message';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
+import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
+import { Themable } from 'vs/workbench/common/theme';
 
 export const WALK_THROUGH_FOCUS = new RawContextKey<boolean>('interactivePlaygroundFocus', false);
 
@@ -79,6 +81,27 @@ class WalkThroughCodeEditor extends CodeEditor {
 	}
 }
 
+class WalkThroughTheming extends Themable {
+
+	constructor(
+		themeService: IThemeService,
+		private container: HTMLElement
+	) {
+		super(themeService);
+		this.update(themeService.getTheme());
+	}
+
+	protected onThemeChange(theme: ITheme): void {
+		super.onThemeChange(theme);
+		this.update(theme);
+	}
+
+	private update(theme: ITheme): void {
+		const background = theme.getColor(editorBackground);
+		this.container.classList.toggle('extra-dark', background.getLuminosity() < 0.004);
+	}
+}
+
 export class WalkThroughPart extends BaseEditor {
 
 	static ID: string = 'workbench.editor.walkThroughPart';
@@ -307,6 +330,7 @@ export class WalkThroughPart extends BaseEditor {
 					this.content.innerHTML = content;
 					this.updateSizeClasses();
 					this.updateMarkerClasses();
+					this.addThemeListener();
 					this.decorateContent();
 					if (input.onReady) {
 						input.onReady(this.content.firstElementChild as HTMLElement);
@@ -407,6 +431,7 @@ export class WalkThroughPart extends BaseEditor {
 				});
 				this.updateSizeClasses();
 				this.updateMarkerClasses();
+				this.addThemeListener();
 				if (input.onReady) {
 					input.onReady(innerContent);
 				}
@@ -444,6 +469,11 @@ export class WalkThroughPart extends BaseEditor {
 		}
 	}
 
+	private addThemeListener() {
+		const innerContent = this.content.firstElementChild as HTMLElement;
+		this.contentDisposables.push(new WalkThroughTheming(this.themeService, innerContent));
+	}
+
 	private style(theme: ITheme, div: HTMLElement) {
 		const styleElement = this.partService.getContainer(Parts.EDITOR_PART); // TODO@theme styles should come in via theme registry
 		const { color, backgroundColor, fontFamily, fontWeight, fontSize } = window.getComputedStyle(styleElement);