Skip to content

Commit 8b7ea33

Browse files
aeschliaeschli
committed
Custom dialog icons don't have the correct color tokens. Fixes microsoft#95900 
1 parent 8dff641 commit 8b7ea33

3 files changed

Lines changed: 35 additions & 11 deletions

File tree

‎src/vs/base/browser/ui/dialog/dialog.ts‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ export interface IDialogStyles extends IButtonStyles, ISimpleCheckboxStyles {
3838
dialogBackground?: Color;
3939
dialogShadow?: Color;
4040
dialogBorder?: Color;
41+
errorIconForeground?: Color;
42+
warningIconForeground?: Color;
43+
infoIconForeground?: Color;
4144
}
4245

4346
interface ButtonMapEntry {
@@ -208,7 +211,7 @@ export class Dialog extends Disposable {
208211
}
209212
}));
210213

211-
removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames);
214+
removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames, Codicon.loading.classNames);
212215

213216
switch (this.options.type) {
214217
case 'error':
@@ -218,7 +221,7 @@ export class Dialog extends Disposable {
218221
addClasses(this.iconElement, dialogWarningIcon.classNames);
219222
break;
220223
case 'pending':
221-
addClasses(this.iconElement, 'codicon-loading', 'codicon-animation-spin');
224+
addClasses(this.iconElement, Codicon.loading.classNames, 'codicon-animation-spin');
222225
break;
223226
case 'none':
224227
case 'info':
@@ -273,10 +276,28 @@ export class Dialog extends Disposable {
273276
this.checkbox.style(style);
274277
}
275278

276-
if (this.messageDetailElement) {
279+
if (this.messageDetailElement && fgColor && bgColor) {
277280
const messageDetailColor = Color.fromHex(fgColor).transparent(.9);
278281
this.messageDetailElement.style.color = messageDetailColor.makeOpaque(Color.fromHex(bgColor)).toString();
279282
}
283+
284+
if (this.iconElement) {
285+
let color;
286+
switch (this.options.type) {
287+
case 'error':
288+
color = style.errorIconForeground;
289+
break;
290+
case 'warning':
291+
color = style.warningIconForeground;
292+
break;
293+
default:
294+
color = style.infoIconForeground;
295+
break;
296+
}
297+
if (color) {
298+
this.iconElement.style.color = color.toString();
299+
}
300+
}
280301
}
281302

282303
}

‎src/vs/platform/severityIcon/common/severityIcon.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ registerThemingParticipant((theme, collector) => {
3333
collector.addRule(`
3434
.monaco-editor .zone-widget ${errorCodiconSelector},
3535
.markers-panel .marker-icon${errorCodiconSelector},
36-
.extensions-viewlet > .extensions ${errorCodiconSelector},
37-
.monaco-dialog-box .dialog-message-row ${errorCodiconSelector} {
36+
.extensions-viewlet > .extensions ${errorCodiconSelector} {
3837
color: ${errorIconForeground};
3938
}
4039
`);
@@ -47,8 +46,7 @@ registerThemingParticipant((theme, collector) => {
4746
.monaco-editor .zone-widget ${warningCodiconSelector},
4847
.markers-panel .marker-icon${warningCodiconSelector},
4948
.extensions-viewlet > .extensions ${warningCodiconSelector},
50-
.extension-editor ${warningCodiconSelector},
51-
.monaco-dialog-box .dialog-message-row ${warningCodiconSelector} {
49+
.extension-editor ${warningCodiconSelector} {
5250
color: ${warningIconForeground};
5351
}
5452
`);
@@ -61,8 +59,7 @@ registerThemingParticipant((theme, collector) => {
6159
.monaco-editor .zone-widget ${infoCodiconSelector},
6260
.markers-panel .marker-icon${infoCodiconSelector},
6361
.extensions-viewlet > .extensions ${infoCodiconSelector},
64-
.extension-editor ${infoCodiconSelector},
65-
.monaco-dialog-box .dialog-message-row ${infoCodiconSelector} {
62+
.extension-editor ${infoCodiconSelector} {
6663
color: ${infoIconForeground};
6764
}
6865
`);

‎src/vs/platform/theme/common/styler.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
7-
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';
7+
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';
88
import { IDisposable } from 'vs/base/common/lifecycle';
99
import { Color } from 'vs/base/common/color';
1010
import { IThemable, styleFn } from 'vs/base/common/styler';
@@ -347,6 +347,9 @@ export interface IDialogStyleOverrides extends IButtonStyleOverrides {
347347
checkboxBorder?: ColorIdentifier;
348348
checkboxBackground?: ColorIdentifier;
349349
checkboxForeground?: ColorIdentifier;
350+
errorIconForeground?: ColorIdentifier;
351+
warningIconForeground?: ColorIdentifier;
352+
infoIconForeground?: ColorIdentifier;
350353
}
351354

352355
export const defaultDialogStyles = <IDialogStyleOverrides>{
@@ -360,7 +363,10 @@ export const defaultDialogStyles = <IDialogStyleOverrides>{
360363
buttonBorder: contrastBorder,
361364
checkboxBorder: simpleCheckboxBorder,
362365
checkboxBackground: simpleCheckboxBackground,
363-
checkboxForeground: simpleCheckboxForeground
366+
checkboxForeground: simpleCheckboxForeground,
367+
errorIconForeground: problemsErrorIconForeground,
368+
warningIconForeground: problemsWarningIconForeground,
369+
infoIconForeground: problemsInfoIconForeground
364370
};
365371

366372

0 commit comments

Comments
 (0)