Debt - use CSS variables over registerThemingParticipant

[jrieken]

When running VS Code (or the Monaco editor) all theme colors are exposed as CSS variables. That means components don’t need to use JavaScript to read and set colors but can simply rely on CSS. When a theme changes, the variable values automatically update. Also, with CSS variables you have less code and everything in one place.

The (long) list below is all users of registerThemingParticipant. Those that only set/update colors are candidates for adopting CSS variables The names of the CSS variables can be "derived" with the following logic

1. prefix --vscode-
2. take the theme color id and replace dots with slashes

For instance the color id editorSuggestWidget.background is exposed as CSS variables --vscode-editorSuggestWidget-background. Find a sample adoption in this commit: 3a787a8.

---

• src/vs/editor/contrib/find/browser/findWidget.ts @rebornix
• src/vs/workbench/browser/parts/activitybar/activitybarActions.ts
• src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @bpasero
• src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts @Tyriar
• src/vs/workbench/contrib/codeEditor/browser/suggestEnabledInput/suggestEnabledInput.ts
• src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint.ts
• src/vs/workbench/contrib/customEditor/browser/customEditors.ts
• src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts @roblourens
• src/vs/workbench/contrib/debug/browser/callStackEditorContribution.ts @roblourens
• src/vs/workbench/contrib/debug/browser/debugColors.ts @roblourens
• src/vs/workbench/contrib/extensions/browser/extensionsActions.ts @sandy081
• src/vs/workbench/contrib/extensions/browser/extensionsList.ts @sandy081
• src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts @sandy081
• src/vs/workbench/contrib/extensions/browser/extensionsWidgets.ts @sandy081
• src/vs/workbench/contrib/interactive/browser/interactive.contribution.ts @rebornix
• src/vs/workbench/contrib/output/browser/outputView.ts @sandy081
• src/vs/workbench/contrib/search/browser/searchView.ts @andreamah
• src/vs/workbench/contrib/searchEditor/browser/searchEditor.ts @andreamah
• src/vs/workbench/contrib/terminal/browser/terminalInstance.ts @Tyriar
• src/vs/workbench/contrib/terminal/browser/terminalView.ts @Tyriar
• src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts @Tyriar
• src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts @Tyriar
• src/vs/workbench/contrib/terminal/browser/xterm/markNavigationAddon.ts @Tyriar
• src/vs/workbench/contrib/terminal/browser/xterm/quickFixAddon.ts @Tyriar
• src/vs/workbench/contrib/welcomeOverlay/browser/welcomeOverlay.ts @bhavyaus
• src/vs/workbench/contrib/welcomeWalkthrough/browser/walkThroughPart.ts @bhavyaus

[Tyriar]

I looked over mine again and they are all there still intentionally:

vscode/src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts

Lines 135 to 143 in bceaaf8

	registerThemingParticipant((theme, collector) => {
	let editorHoverHighlightColor = theme.getColor(editorHoverHighlight);
	if (editorHoverHighlightColor) {
	if (editorHoverHighlightColor.isOpaque()) {
	editorHoverHighlightColor = editorHoverHighlightColor.transparent(0.5);
	}
	collector.addRule(`.integrated-terminal .hoverHighlight { background-color: ${editorHoverHighlightColor}; }`);
	}
	});

I don't think we can get the same effect of .transparent(0.5) in CSS using the variable.

https://github.com/microsoft/vscode/blob/bceaaf84a27c3a95a0cdfc79287e3215b56b951c/src/vs/workbench/services/hover/browser/hoverService.ts#L179-L186

Same as above.

vscode/src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts

Lines 479 to 486 in bceaaf8

	let successColor: string | Color | undefined;
	let errorColor: string | Color | undefined;
	let defaultColor: string | Color | undefined;
	registerThemingParticipant((theme: IColorTheme) => {
	successColor = theme.getColor(TERMINAL_COMMAND_DECORATION_SUCCESS_BACKGROUND_COLOR);
	errorColor = theme.getColor(TERMINAL_COMMAND_DECORATION_ERROR_BACKGROUND_COLOR);
	defaultColor = theme.getColor(TERMINAL_COMMAND_DECORATION_DEFAULT_BACKGROUND_COLOR);
	});

This is needed as the color is handed off to xterm.js.

[jrieken]

@Tyriar please check those occurrences anyways so that we can remove them from the todo list

[andreamah]

For searchEditor.ts, I couldn't find references to registerThemingParticipant.

For searchView.ts, we use the RGB values from the foreground var and we use a custom alpha. Since this only applies to the text, I don't think that there's a CSS-only equivalent. We could create a new var for this or just leave this as is; I'm not sure what's best in this case.

vscode/src/vs/workbench/contrib/search/browser/searchView.ts

Lines 2037 to 2045 in b58d49d

	registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
	if (theme.type === 'dark') {
	const foregroundColor = theme.getColor(foreground);
	if (foregroundColor) {
	const fgWithOpacity = new Color(new RGBA(foregroundColor.rgba.r, foregroundColor.rgba.g, foregroundColor.rgba.b, 0.65));
	collector.addRule(`.search-view .message { color: ${fgWithOpacity}; }`);
	}
	}
	});

[Tyriar]

@andreamah you're setting color there so you can probably use a plain opacity: 0.65 style, unless the element also has a background color as that would also apply there.

[andreamah]

@andreamah you're setting color there so you can probably use a plain opacity: 0.65 style, unless the element also has a background color as that would also apply there.

The element also has links, which have a normal alpha, so then the link opacity is affected.

[Tyriar]

@andreamah you could have another rule with higher specificity that re-applies the link color?

[aeschli]

@Tyriar For

vscode/src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts

Lines 135 to 143 in bceaaf8

	registerThemingParticipant((theme, collector) => {
	let editorHoverHighlightColor = theme.getColor(editorHoverHighlight);
	if (editorHoverHighlightColor) {
	if (editorHoverHighlightColor.isOpaque()) {
	editorHoverHighlightColor = editorHoverHighlightColor.transparent(0.5);
	}
	collector.addRule(`.integrated-terminal .hoverHighlight { background-color: ${editorHoverHighlightColor}; }`);
	}
	});

you could define a new (terminal hover specific) color. The default value of the color can express that it is a function of editorHoverHighlightColor

vscode/src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts

Lines 479 to 486 in bceaaf8

	let successColor: string | Color | undefined;
	let errorColor: string | Color | undefined;
	let defaultColor: string | Color | undefined;
	registerThemingParticipant((theme: IColorTheme) => {
	successColor = theme.getColor(TERMINAL_COMMAND_DECORATION_SUCCESS_BACKGROUND_COLOR);
	errorColor = theme.getColor(TERMINAL_COMMAND_DECORATION_ERROR_BACKGROUND_COLOR);
	defaultColor = theme.getColor(TERMINAL_COMMAND_DECORATION_DEFAULT_BACKGROUND_COLOR);
	});

To access a color value use IThemeService.getColorTheme().getColor(...)

[bpasero]

As discussed in standup, tabs have quite an involved CSS ruling that involves not only colors but also other properties. I would like to keep it this way via registerThemingParticipant and not invent various class names to get a similar effect to make maintenance easier there.

[jrieken]

Closing this as I believe we are done here