Theming for keybinding label

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css

@@ -11,13 +11,10 @@
 
 .monaco-keybinding > .monaco-keybinding-key {
 	display: inline-block;
-	border: solid 1px rgba(204, 204, 204, 0.4);
-	border-bottom-color: rgba(187, 187, 187, 0.4);
+	border-style: solid;
+	border-width: 1px;
 	border-radius: 3px;
-	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
-	background-color: rgba(221, 221, 221, 0.4);
 	vertical-align: middle;
-	color: #555;
 	font-size: 11px;
 	padding: 3px 5px;
 	margin: 0 2px;
@@ -31,19 +28,10 @@
 	margin-right: 0;
 }
 
-.hc-black .monaco-keybinding > .monaco-keybinding-key,
-.vs-dark .monaco-keybinding > .monaco-keybinding-key {
-	background-color: rgba(128, 128, 128, 0.17);
-	color: #ccc;
-	border: solid 1px rgba(51, 51, 51, 0.6);
-	border-bottom-color: rgba(68, 68, 68, 0.6);
-	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
-}
-
 .monaco-keybinding > .monaco-keybinding-key-separator {
 	display: inline-block;
 }
 
 .monaco-keybinding > .monaco-keybinding-key-chord-separator {
 	width: 6px;
-}
+}

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts

@@ -10,6 +10,8 @@ import { ResolvedKeybinding, ResolvedKeybindingPart } from 'vs/base/common/keyCo
 import { UILabelProvider } from 'vs/base/common/keybindingLabels';
 import * as dom from 'vs/base/browser/dom';
 import { localize } from 'vs/nls';
+import { IThemable } from 'vs/base/common/styler';
+import { Color } from 'vs/base/common/color';
 
 const $ = dom.$;
 
@@ -26,18 +28,44 @@ export interface Matches {
 	chordPart: PartMatches;
 }
 
-export interface KeybindingLabelOptions {
-	renderUnboundKeybindings: boolean;
+export interface KeybindingLabelOptions extends IKeybindingLabelStyles {
+	renderUnboundKeybindings?: boolean;
 }
 
-export class KeybindingLabel {
+export interface IKeybindingLabelStyles {
+	keybindingLabelBackground?: Color;
+	keybindingLabelForeground?: Color;
+	keybindingLabelBorder?: Color;
+	keybindingLabelBottomBorder?: Color;
+	keybindingLabelShadow?: Color;
+}
+
+export class KeybindingLabel implements IThemable {
 
 	private domNode: HTMLElement;
+	private options: KeybindingLabelOptions;
+
+	private readonly keyElements = new Set<HTMLSpanElement>();
+
 	private keybinding: ResolvedKeybinding | undefined;
 	private matches: Matches | undefined;
 	private didEverRender: boolean;
 
-	constructor(container: HTMLElement, private os: OperatingSystem, private options?: KeybindingLabelOptions) {
+	private labelBackground: Color | undefined;
+	private labelForeground: Color | undefined;
+	private labelBorder: Color | undefined;
+	private labelBottomBorder: Color | undefined;
+	private labelShadow: Color | undefined;
+
+	constructor(container: HTMLElement, private os: OperatingSystem, options?: KeybindingLabelOptions) {
+		this.options = options || Object.create(null);
+
+		this.labelBackground = this.options.keybindingLabelBackground;
+		this.labelForeground = this.options.keybindingLabelForeground;
+		this.labelBorder = this.options.keybindingLabelBorder;
+		this.labelBottomBorder = this.options.keybindingLabelBottomBorder;
+		this.labelShadow = this.options.keybindingLabelShadow;
+
 		this.domNode = dom.append(container, $('.monaco-keybinding'));
 		this.didEverRender = false;
 		container.appendChild(this.domNode);
@@ -58,7 +86,7 @@ export class KeybindingLabel {
 	}
 
 	private render() {
-		dom.clearNode(this.domNode);
+		this.clear();
 
 		if (this.keybinding) {
 			let [firstPart, chordPart] = this.keybinding.getParts();
@@ -74,9 +102,16 @@ export class KeybindingLabel {
 			this.renderUnbound(this.domNode);
 		}
 
+		this.applyStyles();
+
 		this.didEverRender = true;
 	}
 
+	private clear(): void {
+		dom.clearNode(this.domNode);
+		this.keyElements.clear();
+	}
+
 	private renderPart(parent: HTMLElement, part: ResolvedKeybindingPart, match: PartMatches | null) {
 		const modifierLabels = UILabelProvider.modifierLabels[this.os];
 		if (part.ctrlKey) {
@@ -98,14 +133,54 @@ export class KeybindingLabel {
 	}
 
 	private renderKey(parent: HTMLElement, label: string, highlight: boolean, separator: string): void {
-		dom.append(parent, $('span.monaco-keybinding-key' + (highlight ? '.highlight' : ''), undefined, label));
+		dom.append(parent, this.createKeyElement(label, highlight ? '.highlight' : ''));
 		if (separator) {
 			dom.append(parent, $('span.monaco-keybinding-key-separator', undefined, separator));
 		}
 	}
 
 	private renderUnbound(parent: HTMLElement): void {
-		dom.append(parent, $('span.monaco-keybinding-key', undefined, localize('unbound', "Unbound")));
+		dom.append(parent, this.createKeyElement(localize('unbound', "Unbound")));
+	}
+
+	private createKeyElement(label: string, extraClass = ''): HTMLElement {
+		const keyElement = $('span.monaco-keybinding-key' + extraClass, undefined, label);
+		this.keyElements.add(keyElement);
+
+		return keyElement;
+	}
+
+	style(styles: IKeybindingLabelStyles): void {
+		this.labelBackground = styles.keybindingLabelBackground;
+		this.labelForeground = styles.keybindingLabelForeground;
+		this.labelBorder = styles.keybindingLabelBorder;
+		this.labelBottomBorder = styles.keybindingLabelBottomBorder;
+		this.labelShadow = styles.keybindingLabelShadow;
+
+		this.applyStyles();
+	}
+
+	private applyStyles() {
+		if (this.element) {
+			for (const keyElement of this.keyElements) {
+				if (this.labelBackground) {
+					keyElement.style.backgroundColor = this.labelBackground?.toString();
+				}
+				if (this.labelBorder) {
+					keyElement.style.borderColor = this.labelBorder.toString();
+				}
+				if (this.labelBottomBorder) {
+					keyElement.style.borderBottomColor = this.labelBottomBorder.toString();
+				}
+				if (this.labelShadow) {
+					keyElement.style.boxShadow = `inset 0 -1px 0 ${this.labelShadow}`;
+				}
+			}
+
+			if (this.labelForeground) {
+				this.element.style.color = this.labelForeground.toString();
+			}
+		}
 	}
 
 	private static areSame(a: Matches | undefined, b: Matches | undefined): boolean {

src/vs/base/parts/quickinput/browser/quickInput.ts

@@ -32,6 +32,7 @@ import { ActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { escape } from 'vs/base/common/strings';
 import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
 import { isString } from 'vs/base/common/types';
+import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
 
 export interface IQuickInputOptions {
 	idPrefix: string;
@@ -57,6 +58,7 @@ export interface IQuickInputStyles {
 	countBadge: ICountBadgetyles;
 	button: IButtonStyles;
 	progressBar: IProgressBarStyles;
+	keybindingLabel: IKeybindingLabelStyles;
 	list: IListStyles & { pickerGroupBorder?: Color; pickerGroupForeground?: Color; };
 }
 
@@ -1733,6 +1735,34 @@ export class QuickInputController extends Disposable {
 			if (this.styles.list.pickerGroupForeground) {
 				content.push(`.quick-input-list .quick-input-list-separator { color:  ${this.styles.list.pickerGroupForeground}; }`);
 			}
+
+			if (
+				this.styles.keybindingLabel.keybindingLabelBackground ||
+				this.styles.keybindingLabel.keybindingLabelBorder ||
+				this.styles.keybindingLabel.keybindingLabelBottomBorder ||
+				this.styles.keybindingLabel.keybindingLabelShadow ||
+				this.styles.keybindingLabel.keybindingLabelForeground
+			) {
+				content.push('.quick-input-list .monaco-keybinding > .monaco-keybinding-key {');
+				if (this.styles.keybindingLabel.keybindingLabelBackground) {
+					content.push(`background-color: ${this.styles.keybindingLabel.keybindingLabelBackground};`);
+				}
+				if (this.styles.keybindingLabel.keybindingLabelBorder) {
+					// Order matters here. `border-color` must come before `border-bottom-color`.
+					content.push(`border-color: ${this.styles.keybindingLabel.keybindingLabelBorder};`);
+				}
+				if (this.styles.keybindingLabel.keybindingLabelBottomBorder) {
+					content.push(`border-bottom-color: ${this.styles.keybindingLabel.keybindingLabelBottomBorder};`);
+				}
+				if (this.styles.keybindingLabel.keybindingLabelShadow) {
+					content.push(`box-shadow: inset 0 -1px 0 ${this.styles.keybindingLabel.keybindingLabelShadow};`);
+				}
+				if (this.styles.keybindingLabel.keybindingLabelForeground) {
+					content.push(`color: ${this.styles.keybindingLabel.keybindingLabelForeground};`);
+				}
+				content.push('}');
+			}
+
 			const newStyles = content.join('\n');
 			if (newStyles !== this.ui.styleSheet.textContent) {
 				this.ui.styleSheet.textContent = newStyles;

src/vs/editor/standalone/browser/quickInput/standaloneQuickInput.css

@@ -21,3 +21,26 @@
 .hc-black .quick-input-widget .monaco-highlighted-label .highlight {
 	color: #F38518;
 }
+
+.monaco-keybinding > .monaco-keybinding-key {
+	background-color: rgba(221, 221, 221, 0.4);
+	border: solid 1px rgba(204, 204, 204, 0.4);
+	border-bottom-color: rgba(187, 187, 187, 0.4);
+	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
+	color: #555;
+}
+
+.hc-black .monaco-keybinding > .monaco-keybinding-key {
+	background-color: transparent;
+	border: solid 1px rgb(111, 195, 223);
+	box-shadow: none;
+	color: #fff;
+}
+
+.vs-dark .monaco-keybinding > .monaco-keybinding-key {
+	background-color: rgba(128, 128, 128, 0.17);
+	border: solid 1px rgba(51, 51, 51, 0.6);
+	border-bottom-color: rgba(68, 68, 68, 0.6);
+	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
+	color: #ccc;
+}

src/vs/platform/quickinput/browser/quickInput.ts

@@ -7,7 +7,7 @@ import { IQuickInputService, IQuickPickItem, IPickOptions, IInputOptions, IQuick
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IThemeService, Themable } from 'vs/platform/theme/common/themeService';
-import { inputBackground, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorForeground, inputValidationErrorBorder, badgeBackground, badgeForeground, contrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, progressBarBackground, widgetShadow, listFocusForeground, activeContrastBorder, pickerGroupBorder, pickerGroupForeground, quickInputForeground, quickInputBackground, quickInputTitleBackground, quickInputListFocusBackground } from 'vs/platform/theme/common/colorRegistry';
+import { inputBackground, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorForeground, inputValidationErrorBorder, badgeBackground, badgeForeground, contrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, progressBarBackground, widgetShadow, listFocusForeground, activeContrastBorder, pickerGroupBorder, pickerGroupForeground, quickInputForeground, quickInputBackground, quickInputTitleBackground, quickInputListFocusBackground, keybindingLabelBackground, keybindingLabelForeground, keybindingLabelBorder, keybindingLabelBottomBorder } from 'vs/platform/theme/common/colorRegistry';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { computeStyles } from 'vs/platform/theme/common/styler';
 import { IContextKeyService, RawContextKey, IContextKey } from 'vs/platform/contextkey/common/contextkey';
@@ -209,6 +209,13 @@ export class QuickInputService extends Themable implements IQuickInputService {
 			progressBar: computeStyles(this.theme, {
 				progressBarBackground
 			}),
+			keybindingLabel: computeStyles(this.theme, {
+				keybindingLabelBackground,
+				keybindingLabelForeground,
+				keybindingLabelBorder,
+				keybindingLabelBottomBorder,
+				keybindingLabelShadow: widgetShadow
+			}),
 			list: computeStyles(this.theme, {
 				listBackground: quickInputBackground,
 				// Look like focused when inactive.

src/vs/platform/theme/common/colorRegistry.ts

@@ -292,6 +292,14 @@ export const quickInputTitleBackground = registerColor('quickInputTitle.backgrou
 export const pickerGroupForeground = registerColor('pickerGroup.foreground', { dark: '#3794FF', light: '#0066BF', hc: Color.white }, nls.localize('pickerGroupForeground', "Quick picker color for grouping labels."));
 export const pickerGroupBorder = registerColor('pickerGroup.border', { dark: '#3F3F46', light: '#CCCEDB', hc: Color.white }, nls.localize('pickerGroupBorder', "Quick picker color for grouping borders."));
 
+/**
+ * Keybinding label
+ */
+export const keybindingLabelBackground = registerColor('keybindingLabel.background', { dark: new Color(new RGBA(128, 128, 128, 0.17)), light: new Color(new RGBA(221, 221, 221, 0.4)), hc: Color.transparent }, nls.localize('keybindingLabelBackground', "Keybinding label background color. The keybinding label is used to represent a keyboard shortcut."));
+export const keybindingLabelForeground = registerColor('keybindingLabel.foreground', { dark: Color.fromHex('#CCCCCC'), light: Color.fromHex('#555555'), hc: Color.white }, nls.localize('keybindingLabelForeground', "Keybinding label foreground color. The keybinding label is used to represent a keyboard shortcut."));
+export const keybindingLabelBorder = registerColor('keybindingLabel.border', { dark: new Color(new RGBA(51, 51, 51, 0.6)), light: new Color(new RGBA(204, 204, 204, 0.4)), hc: new Color(new RGBA(111, 195, 223)) }, nls.localize('keybindingLabelBorder', "Keybinding label border color. The keybinding label is used to represent a keyboard shortcut."));
+export const keybindingLabelBottomBorder = registerColor('keybindingLabel.bottomBorder', { dark: new Color(new RGBA(68, 68, 68, 0.6)), light: new Color(new RGBA(187, 187, 187, 0.4)), hc: new Color(new RGBA(111, 195, 223)) }, nls.localize('keybindingLabelBottomBorder', "Keybinding label border bottom color. The keybinding label is used to represent a keyboard shortcut."));
+
 /**
  * Editor selection colors.
  */