Closed
Description
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
- prefix
--vscode- - 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