From 8b7ea333ccc46fc8a27eda86199dfec57a4e255b Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Wed, 22 Apr 2020 22:42:07 +0200 Subject: [PATCH] Custom dialog icons don't have the correct color tokens. Fixes #95900 --- src/vs/base/browser/ui/dialog/dialog.ts | 27 ++++++++++++++++--- .../severityIcon/common/severityIcon.ts | 9 +++---- src/vs/platform/theme/common/styler.ts | 10 +++++-- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/src/vs/base/browser/ui/dialog/dialog.ts b/src/vs/base/browser/ui/dialog/dialog.ts index 7108fa00b0c..089af090e28 100644 --- a/src/vs/base/browser/ui/dialog/dialog.ts +++ b/src/vs/base/browser/ui/dialog/dialog.ts @@ -38,6 +38,9 @@ export interface IDialogStyles extends IButtonStyles, ISimpleCheckboxStyles { dialogBackground?: Color; dialogShadow?: Color; dialogBorder?: Color; + errorIconForeground?: Color; + warningIconForeground?: Color; + infoIconForeground?: Color; } interface ButtonMapEntry { @@ -208,7 +211,7 @@ export class Dialog extends Disposable { } })); - removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames); + removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames, Codicon.loading.classNames); switch (this.options.type) { case 'error': @@ -218,7 +221,7 @@ export class Dialog extends Disposable { addClasses(this.iconElement, dialogWarningIcon.classNames); break; case 'pending': - addClasses(this.iconElement, 'codicon-loading', 'codicon-animation-spin'); + addClasses(this.iconElement, Codicon.loading.classNames, 'codicon-animation-spin'); break; case 'none': case 'info': @@ -273,10 +276,28 @@ export class Dialog extends Disposable { this.checkbox.style(style); } - if (this.messageDetailElement) { + if (this.messageDetailElement && fgColor && bgColor) { const messageDetailColor = Color.fromHex(fgColor).transparent(.9); this.messageDetailElement.style.color = messageDetailColor.makeOpaque(Color.fromHex(bgColor)).toString(); } + + if (this.iconElement) { + let color; + switch (this.options.type) { + case 'error': + color = style.errorIconForeground; + break; + case 'warning': + color = style.warningIconForeground; + break; + default: + color = style.infoIconForeground; + break; + } + if (color) { + this.iconElement.style.color = color.toString(); + } + } } } diff --git a/src/vs/platform/severityIcon/common/severityIcon.ts b/src/vs/platform/severityIcon/common/severityIcon.ts index 848a56ae792..f09bc4b255b 100644 --- a/src/vs/platform/severityIcon/common/severityIcon.ts +++ b/src/vs/platform/severityIcon/common/severityIcon.ts @@ -33,8 +33,7 @@ registerThemingParticipant((theme, collector) => { collector.addRule(` .monaco-editor .zone-widget ${errorCodiconSelector}, .markers-panel .marker-icon${errorCodiconSelector}, - .extensions-viewlet > .extensions ${errorCodiconSelector}, - .monaco-dialog-box .dialog-message-row ${errorCodiconSelector} { + .extensions-viewlet > .extensions ${errorCodiconSelector} { color: ${errorIconForeground}; } `); @@ -47,8 +46,7 @@ registerThemingParticipant((theme, collector) => { .monaco-editor .zone-widget ${warningCodiconSelector}, .markers-panel .marker-icon${warningCodiconSelector}, .extensions-viewlet > .extensions ${warningCodiconSelector}, - .extension-editor ${warningCodiconSelector}, - .monaco-dialog-box .dialog-message-row ${warningCodiconSelector} { + .extension-editor ${warningCodiconSelector} { color: ${warningIconForeground}; } `); @@ -61,8 +59,7 @@ registerThemingParticipant((theme, collector) => { .monaco-editor .zone-widget ${infoCodiconSelector}, .markers-panel .marker-icon${infoCodiconSelector}, .extensions-viewlet > .extensions ${infoCodiconSelector}, - .extension-editor ${infoCodiconSelector}, - .monaco-dialog-box .dialog-message-row ${infoCodiconSelector} { + .extension-editor ${infoCodiconSelector} { color: ${infoIconForeground}; } `); diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 97e7a7ac64a..0810ef07116 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; +import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { Color } from 'vs/base/common/color'; import { IThemable, styleFn } from 'vs/base/common/styler'; @@ -347,6 +347,9 @@ export interface IDialogStyleOverrides extends IButtonStyleOverrides { checkboxBorder?: ColorIdentifier; checkboxBackground?: ColorIdentifier; checkboxForeground?: ColorIdentifier; + errorIconForeground?: ColorIdentifier; + warningIconForeground?: ColorIdentifier; + infoIconForeground?: ColorIdentifier; } export const defaultDialogStyles = { @@ -360,7 +363,10 @@ export const defaultDialogStyles = { buttonBorder: contrastBorder, checkboxBorder: simpleCheckboxBorder, checkboxBackground: simpleCheckboxBackground, - checkboxForeground: simpleCheckboxForeground + checkboxForeground: simpleCheckboxForeground, + errorIconForeground: problemsErrorIconForeground, + warningIconForeground: problemsWarningIconForeground, + infoIconForeground: problemsInfoIconForeground };