Quick link and embedded editor background color (fixes #25798)

src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css

@@ -209,12 +209,8 @@
 
 .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
 	color: #6c6c6c;
-	background:rgba(0,0,0,.04);
 	border: none;
 }
-.monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover {
-	background:rgba(0,0,0,.10);
-}
 
 .vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button > h3 {
 	color: #ccc;
@@ -226,19 +222,6 @@
 
 .vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
 	color: #828282;
-	background: rgba(0, 0, 0, .2);
-}
-
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover {
-	background: rgba(200, 235, 255, .072);
-}
-
-.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 .welcomePageContainer.extra-dark .commands li button:hover {
-	background: rgba(200, 235, 255, .072);
 }
 
 .monaco-workbench > .part.editor > .content .welcomePage .commands li button:focus {
@@ -248,7 +231,6 @@
 
 .hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
 	color: white;
-	background: black;
 	border-color: #f38518;
 	border-width: 1px;
 	border-style: solid;

src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts

@@ -33,8 +33,10 @@ 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 { IThemeService } from 'vs/platform/theme/common/themeService';
 import { isLinux } from 'vs/base/common/platform';
+import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { getExtraColor } from 'vs/workbench/parts/welcome/walkThrough/node/walkThroughUtils';
 
 used();
 
@@ -361,3 +363,19 @@ class WelcomePage {
 		this.disposables = dispose(this.disposables);
 	}
 }
+
+// theming
+
+const quickLinkBackground = registerColor('welcomePage.quickLinkBackground', { dark: null, light: null, hc: null }, localize('welcomePage.quickLinkBackground', 'Background color for the quick links on the Welcome page.'));
+const quickLinkHoverBackground = registerColor('welcomePage.quickLinkHoverBackground', { dark: null, light: null, hc: null }, localize('welcomePage.quickLinkHoverBackground', 'Hover background color for the quick links on the Welcome page.'));
+
+registerThemingParticipant((theme, collector) => {
+	const color = getExtraColor(theme, quickLinkBackground, { dark: 'rgba(0, 0, 0, .2)', extra_dark: 'rgba(200, 235, 255, .042)', light: 'rgba(0,0,0,.04)', hc: 'black' });
+	if (color) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button { background: ${color}; }`);
+	}
+	const hover = getExtraColor(theme, quickLinkHoverBackground, { dark: 'rgba(200, 235, 255, .072)', extra_dark: 'rgba(200, 235, 255, .072)', light: 'rgba(0,0,0,.10)', hc: null });
+	if (hover) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover { background: ${hover}; }`);
+	}
+});

src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css

@@ -161,21 +161,6 @@
 	display: initial;
 }
 
-.vs .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background,
-.vs .monaco-workbench > .part.editor > .content .walkThroughContent .glyph-margin {
-	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: 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 {
 	border: 1px white solid
 }

src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts

@@ -37,9 +37,9 @@ import { ICodeEditorService } from 'vs/editor/common/services/codeEditorService'
 import { Parts, IPartService } from 'vs/workbench/services/part/common/partService';
 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';
+import { IThemeService, ITheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { getExtraColor } from 'vs/workbench/parts/welcome/walkThrough/node/walkThroughUtils';
 
 export const WALK_THROUGH_FOCUS = new RawContextKey<boolean>('interactivePlaygroundFocus', false);
 
@@ -81,27 +81,6 @@ 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';
@@ -329,7 +308,6 @@ export class WalkThroughPart extends BaseEditor {
 				if (!strings.endsWith(input.getResource().path, '.md')) {
 					this.content.innerHTML = content;
 					this.updateSizeClasses();
-					this.addThemeListener();
 					this.decorateContent();
 					if (input.onReady) {
 						input.onReady(this.content.firstElementChild as HTMLElement);
@@ -429,7 +407,6 @@ export class WalkThroughPart extends BaseEditor {
 					}));
 				});
 				this.updateSizeClasses();
-				this.addThemeListener();
 				if (input.onReady) {
 					input.onReady(innerContent);
 				}
@@ -458,11 +435,6 @@ 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);
@@ -552,3 +524,15 @@ export class WalkThroughPart extends BaseEditor {
 		super.dispose();
 	}
 }
+
+// theming
+
+const embeddedEditorBackground = registerColor('walkThrough.embeddedEditorBackground', { dark: null, light: null, hc: null }, localize('walkThrough.embeddedEditorBackground', 'Background color for the embedded editors on the Interactive Playground.'));
+
+registerThemingParticipant((theme, collector) => {
+	const color = getExtraColor(theme, embeddedEditorBackground, { dark: 'rgba(0, 0, 0, .4)', extra_dark: 'rgba(200, 235, 255, .064)', light: 'rgba(0,0,0,.08)', hc: null });
+	if (color) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background,
+			.monaco-workbench > .part.editor > .content .walkThroughContent .margin-view-overlays { background: ${color}; }`);
+	}
+});

src/vs/workbench/parts/welcome/walkThrough/node/walkThroughUtils.ts

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { ITheme } from 'vs/platform/theme/common/themeService';
+import { editorBackground, ColorDefaults, ColorValue } from 'vs/platform/theme/common/colorRegistry';
+
+export function getExtraColor(theme: ITheme, colorId: string, defaults: ColorDefaults & { extra_dark: string }): ColorValue {
+	const color = theme.getColor(colorId);
+	if (color) {
+		return color;
+	}
+
+	if (theme.type === 'dark') {
+		const background = theme.getColor(editorBackground);
+		if (background && background.getLuminosity() < 0.004) {
+			return defaults.extra_dark;
+		}
+	}
+
+	return defaults[theme.type];
+}