diff --git a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts index 6a970112b27a6..57d90964cea6c 100644 --- a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts +++ b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts @@ -4,12 +4,10 @@ *--------------------------------------------------------------------------------------------*/ import * as dom from 'vs/base/browser/dom'; -import { Color } from 'vs/base/common/color'; import { UILabelProvider } from 'vs/base/common/keybindingLabels'; import { ResolvedKeybinding, ResolvedKeybindingPart } from 'vs/base/common/keybindings'; import { equals } from 'vs/base/common/objects'; import { OperatingSystem } from 'vs/base/common/platform'; -import { IThemable } from 'vs/base/common/styler'; import 'vs/css!./keybindingLabel'; import { localize } from 'vs/nls'; @@ -32,15 +30,17 @@ export interface KeybindingLabelOptions extends IKeybindingLabelStyles { renderUnboundKeybindings?: boolean; } +export type CSSValueString = string; + export interface IKeybindingLabelStyles { - keybindingLabelBackground?: Color; - keybindingLabelForeground?: Color; - keybindingLabelBorder?: Color; - keybindingLabelBottomBorder?: Color; - keybindingLabelShadow?: Color; + keybindingLabelBackground?: CSSValueString; + keybindingLabelForeground?: CSSValueString; + keybindingLabelBorder?: CSSValueString; + keybindingLabelBottomBorder?: CSSValueString; + keybindingLabelShadow?: CSSValueString; } -export class KeybindingLabel implements IThemable { +export class KeybindingLabel { private domNode: HTMLElement; private options: KeybindingLabelOptions; @@ -51,22 +51,26 @@ export class KeybindingLabel implements IThemable { private matches: Matches | undefined; private didEverRender: boolean; - private labelBackground: Color | undefined; - private labelForeground: Color | undefined; - private labelBorder: Color | undefined; - private labelBottomBorder: Color | undefined; - private labelShadow: Color | undefined; + private labelBackground: CSSValueString | undefined; + private labelBorder: CSSValueString | undefined; + private labelBottomBorder: CSSValueString | undefined; + private labelShadow: CSSValueString | 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; + const labelForeground = this.options.keybindingLabelForeground; + this.domNode = dom.append(container, $('.monaco-keybinding')); + if (labelForeground) { + this.domNode.style.color = labelForeground; + } + this.didEverRender = false; container.appendChild(this.domNode); } @@ -102,8 +106,6 @@ export class KeybindingLabel implements IThemable { this.renderUnbound(this.domNode); } - this.applyStyles(); - this.didEverRender = true; } @@ -147,40 +149,20 @@ export class KeybindingLabel implements IThemable { 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(); - } + if (this.labelBackground) { + keyElement.style.backgroundColor = this.labelBackground; + } + if (this.labelBorder) { + keyElement.style.borderColor = this.labelBorder; } + if (this.labelBottomBorder) { + keyElement.style.borderBottomColor = this.labelBottomBorder; + } + if (this.labelShadow) { + keyElement.style.boxShadow = `inset 0 -1px 0 ${this.labelShadow}`; + } + + return keyElement; } private static areSame(a: Matches | undefined, b: Matches | undefined): boolean { diff --git a/src/vs/editor/browser/editorDom.ts b/src/vs/editor/browser/editorDom.ts index 4cfc92f8a6e71..edea50a9f3041 100644 --- a/src/vs/editor/browser/editorDom.ts +++ b/src/vs/editor/browser/editorDom.ts @@ -9,7 +9,7 @@ import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { RunOnceScheduler } from 'vs/base/common/async'; import { Disposable, IDisposable } from 'vs/base/common/lifecycle'; import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; -import { asCssVariableName } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue } from 'vs/platform/theme/common/colorRegistry'; import { ThemeColor } from 'vs/platform/theme/common/themeService'; /** @@ -378,7 +378,7 @@ class RefCountedCssRule { const value = (properties as any)[prop] as string | ThemeColor; let cssValue; if (typeof value === 'object') { - cssValue = `var(${asCssVariableName(value.id)})`; + cssValue = asCssValue(value.id); } else { cssValue = value; } diff --git a/src/vs/platform/theme/browser/defaultStyles.ts b/src/vs/platform/theme/browser/defaultStyles.ts new file mode 100644 index 0000000000000..3b622a2829df4 --- /dev/null +++ b/src/vs/platform/theme/browser/defaultStyles.ts @@ -0,0 +1,26 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel'; +import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { IStyleOverrides } from 'vs/platform/theme/common/styler'; + + +export interface IKeybindingLabelStyleOverrides extends IStyleOverrides { + keybindingLabelBackground?: ColorIdentifier; + keybindingLabelForeground?: ColorIdentifier; + keybindingLabelBorder?: ColorIdentifier; + keybindingLabelBottomBorder?: ColorIdentifier; + keybindingLabelShadow?: ColorIdentifier; +} + +export function getKeybindingLabelStyles(style?: IKeybindingLabelStyleOverrides): IKeybindingLabelStyles { + return { + keybindingLabelBackground: asCssValue(style?.keybindingLabelBackground || keybindingLabelBackground), + keybindingLabelForeground: asCssValue(style?.keybindingLabelForeground || keybindingLabelForeground), + keybindingLabelBorder: asCssValue(style?.keybindingLabelBorder || keybindingLabelBorder), + keybindingLabelBottomBorder: asCssValue(style?.keybindingLabelBottomBorder || keybindingLabelBottomBorder), + keybindingLabelShadow: asCssValue(style?.keybindingLabelShadow || widgetShadow) + }; +} diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index d4ba695131ba3..ff92332f808d3 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -35,6 +35,10 @@ export function asCssVariableName(colorIdent: ColorIdentifier): string { return `--vscode-${colorIdent.replace(/\./g, '-')}`; } +export function asCssValue(color: ColorIdentifier): string { + return `var(${asCssVariableName(color)})`; +} + export const enum ColorTransformType { Darken, Lighten, diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index ea7724499c92a..f9b69b944cab3 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -6,7 +6,7 @@ import { Color } from 'vs/base/common/color'; import { IDisposable } from 'vs/base/common/lifecycle'; import { IThemable, styleFn } from 'vs/base/common/styler'; -import { activeContrastBorder, badgeBackground, badgeForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; +import { activeContrastBorder, badgeBackground, badgeForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; import { isHighContrast } from 'vs/platform/theme/common/theme'; import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; @@ -261,25 +261,6 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic buttonBorder: style?.buttonBorder || buttonBorder, } as IButtonStyleOverrides, widget); } - -export interface IKeybindingLabelStyleOverrides extends IStyleOverrides { - keybindingLabelBackground?: ColorIdentifier; - keybindingLabelForeground?: ColorIdentifier; - keybindingLabelBorder?: ColorIdentifier; - keybindingLabelBottomBorder?: ColorIdentifier; - keybindingLabelShadow?: ColorIdentifier; -} - -export function attachKeybindingLabelStyler(widget: IThemable, themeService: IThemeService, style?: IKeybindingLabelStyleOverrides): IDisposable { - return attachStyler(themeService, { - keybindingLabelBackground: (style && style.keybindingLabelBackground) || keybindingLabelBackground, - keybindingLabelForeground: (style && style.keybindingLabelForeground) || keybindingLabelForeground, - keybindingLabelBorder: (style && style.keybindingLabelBorder) || keybindingLabelBorder, - keybindingLabelBottomBorder: (style && style.keybindingLabelBottomBorder) || keybindingLabelBottomBorder, - keybindingLabelShadow: (style && style.keybindingLabelShadow) || widgetShadow - } as IKeybindingLabelStyleOverrides, widget); -} - export interface IProgressBarStyleOverrides extends IStyleOverrides { progressBarBackground?: ColorIdentifier; } diff --git a/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts b/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts index 63b62c591ac1f..e146eafbd1cfd 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts @@ -63,13 +63,13 @@ import { IContextMenuService } from 'vs/platform/contextview/browser/contextView import { EditorContextKeys } from 'vs/editor/common/editorContextKeys'; import { Delegate } from 'vs/workbench/contrib/extensions/browser/extensionsList'; import { renderMarkdown } from 'vs/base/browser/markdownRenderer'; -import { attachKeybindingLabelStyler } from 'vs/platform/theme/common/styler'; import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil'; import { errorIcon, infoIcon, preReleaseIcon, verifiedPublisherIcon as verifiedPublisherThemeIcon, warningIcon } from 'vs/workbench/contrib/extensions/browser/extensionsIcons'; import { IPaneCompositePartService } from 'vs/workbench/services/panecomposite/browser/panecomposite'; import { ViewContainerLocation } from 'vs/workbench/common/views'; import { IExtensionGalleryService, IGalleryExtension } from 'vs/platform/extensionManagement/common/extensionManagement'; import * as semver from 'vs/base/common/semver/semver'; +import { getKeybindingLabelStyles } from 'vs/platform/theme/browser/defaultStyles'; class NavBar extends Disposable { @@ -1556,9 +1556,8 @@ export class ExtensionEditor extends EditorPane { const renderKeybinding = (keybinding: ResolvedKeybinding): HTMLElement => { const element = $(''); - const kbl = new KeybindingLabel(element, OS); + const kbl = new KeybindingLabel(element, OS, getKeybindingLabelStyles()); kbl.set(keybinding); - this.contentDisposables.add(attachKeybindingLabelStyler(kbl, this.themeService)); return element; }; diff --git a/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts b/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts index 6e420438c859f..27abf3b0cbfa4 100644 --- a/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts +++ b/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts @@ -20,7 +20,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; -import { attachInputBoxStyler, attachKeybindingLabelStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { attachInputBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { editorWidgetBackground, editorWidgetForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { ScrollType } from 'vs/editor/common/editorCommon'; @@ -28,6 +28,7 @@ import { SearchWidget, SearchOptions } from 'vs/workbench/contrib/preferences/br import { withNullAsUndefined } from 'vs/base/common/types'; import { Promises, timeout } from 'vs/base/common/async'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; +import { getKeybindingLabelStyles } from 'vs/platform/theme/browser/defaultStyles'; export interface KeybindingsSearchOptions extends SearchOptions { recordEnter?: boolean; @@ -168,9 +169,6 @@ export class DefineKeybindingWidget extends Widget { private _onShowExistingKeybindings = this._register(new Emitter()); readonly onShowExistingKeybidings: Event = this._onShowExistingKeybindings.event; - private disposables = this._register(new DisposableStore()); - private keybindingLabelStylers = this.disposables.add(new DisposableStore()); - constructor( parent: HTMLElement | null, @IInstantiationService private readonly instantiationService: IInstantiationService, @@ -279,17 +277,13 @@ export class DefineKeybindingWidget extends Widget { dom.clearNode(this._outputNode); dom.clearNode(this._showExistingKeybindingsNode); - this.keybindingLabelStylers.clear(); - - const firstLabel = new KeybindingLabel(this._outputNode, OS); + const firstLabel = new KeybindingLabel(this._outputNode, OS, getKeybindingLabelStyles()); firstLabel.set(withNullAsUndefined(this._firstPart)); - this.keybindingLabelStylers.add(attachKeybindingLabelStyler(firstLabel, this.themeService)); if (this._chordPart) { this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to"))); - const chordLabel = new KeybindingLabel(this._outputNode, OS); + const chordLabel = new KeybindingLabel(this._outputNode, OS, getKeybindingLabelStyles()); chordLabel.set(this._chordPart); - this.keybindingLabelStylers.add(attachKeybindingLabelStyler(chordLabel, this.themeService)); } const label = this.getUserSettingsLabel(); diff --git a/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts b/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts index 1b9edd9c0d4cd..7b06f4da2f83c 100644 --- a/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts +++ b/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts @@ -8,7 +8,7 @@ import { localize } from 'vs/nls'; import { Delayer } from 'vs/base/common/async'; import * as DOM from 'vs/base/browser/dom'; import { isIOS, OS } from 'vs/base/common/platform'; -import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle'; +import { DisposableStore } from 'vs/base/common/lifecycle'; import { ToggleActionViewItem } from 'vs/base/browser/ui/toggle/toggle'; import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel'; import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel'; @@ -35,7 +35,7 @@ import { EditorExtensionsRegistry } from 'vs/editor/browser/editorExtensions'; import { WorkbenchTable } from 'vs/platform/list/browser/listService'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { CancellationToken } from 'vs/base/common/cancellation'; -import { attachStylerCallback, attachInputBoxStyler, attachToggleStyler, attachKeybindingLabelStyler } from 'vs/platform/theme/common/styler'; +import { attachStylerCallback, attachInputBoxStyler, attachToggleStyler } from 'vs/platform/theme/common/styler'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; import { InputBox, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import { Emitter, Event } from 'vs/base/common/event'; @@ -49,6 +49,7 @@ import { ITableRenderer, ITableVirtualDelegate } from 'vs/base/browser/ui/table/ import { KeybindingsEditorInput } from 'vs/workbench/services/preferences/browser/keybindingsEditorInput'; import { IEditorOptions } from 'vs/platform/editor/common/editor'; import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar'; +import { getKeybindingLabelStyles } from 'vs/platform/theme/browser/defaultStyles'; const $ = DOM.$; @@ -926,7 +927,6 @@ class CommandColumnRenderer implements ITableRenderer { @@ -935,13 +935,12 @@ class KeybindingColumnRenderer implements ITableRenderer !('mac' in entry) || entry.mac === (isMacintosh && !isWeb)) .filter(entry => !!CommandsRegistry.getCommand(entry.id)); - const keybindingLabelStylers = this.watermarkDisposable.add(new DisposableStore()); const update = () => { dom.clearNode(box); - keybindingLabelStylers.clear(); selected.map(entry => { const dl = dom.append(box, $('dl')); const dt = dom.append(dl, $('dt')); dt.textContent = entry.text; const dd = dom.append(dl, $('dd')); - const keybinding = new KeybindingLabel(dd, OS, { renderUnboundKeybindings: true }); - keybindingLabelStylers.add(attachKeybindingLabelStyler(keybinding, this.themeService)); + const keybinding = new KeybindingLabel(dd, OS, { renderUnboundKeybindings: true, ...getKeybindingLabelStyles() }); keybinding.set(this.keybindingService.lookupKeybinding(entry.id)); }); }; diff --git a/src/vs/workbench/services/decorations/browser/decorationsService.ts b/src/vs/workbench/services/decorations/browser/decorationsService.ts index c1d150de039c5..5670058741f4c 100644 --- a/src/vs/workbench/services/decorations/browser/decorationsService.ts +++ b/src/vs/workbench/services/decorations/browser/decorationsService.ts @@ -20,7 +20,7 @@ import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/ import { hash } from 'vs/base/common/hash'; import { IUriIdentityService } from 'vs/platform/uriIdentity/common/uriIdentity'; import { asArray, distinct } from 'vs/base/common/arrays'; -import { asCssVariableName } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, ColorIdentifier } from 'vs/platform/theme/common/colorRegistry'; import { getIconRegistry } from 'vs/platform/theme/common/iconRegistry'; class DecorationRule { @@ -235,8 +235,8 @@ class DecorationDataRequest { ) { } } -function getColor(color: string | undefined) { - return color ? `var(${asCssVariableName(color)})` : 'inherit'; +function getColor(color: ColorIdentifier | undefined) { + return color ? asCssValue(color) : 'inherit'; } type DecorationEntry = Map;