Use workbench.colorCustomizations in extension? - vscode-extensions

Question

Users can customize the UI using workbench.colorCustomizations settings.
I'd like to ship such customization in my color theme eppz! (C# theme for Unity).
How?
I tried to contribute these values to my extension, but nor configuration, nor configurationDefaults contribution points worked. As these customizations are actually workbench user settings, I'm actually asking how to contribute value overrides to settings.json in an extension.

Answer 1

look for the settings.json file press the CTRL + P key and type settings.json inside this file you can put this information and between the quotes put the colors in hexadecimal
"workbench.colorCustomizations": {
// Contrast Colors - The contrast colors are typically only set for high contrast themes. If set, they add an additional border around items across the UI to increase the contrast.
"contrastActiveBorder": "",
"contrastBorder": "",
// Base Colors
"focusBorder": "",
"foreground": "",
"widget.shadow": "",
"selection.background": "",
"descriptionForeground": "",
"errorForeground": "",
// Text Colors — Colors inside a text document, such as the welcome page.
"textBlockQuote.background": "",
"textBlockQuote.border": "",
"textCodeBlock.background": "",
"textLink.activeForeground": "",
"textLink.foreground": "",
"textPreformat.foreground": "",
"textSeparator.foreground": "",
// Button Control — A set of colors for button widgets such as Open Folder button in the Explorer of a new window.
"button.background": "",
"button.foreground": "",
"button.hoverBackground": "",
// Dropdown Control — A set of colors for all dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the dropdown control is not used on macOS currently.
"dropdown.background": "",
"dropdown.listBackground": "",
"dropdown.border": "",
"dropdown.foreground": "",
// Input Control — Colors for input controls such as in the Search view or the Find/Replace dialog.
"input.background": "",
"input.border": "",
"input.foreground": "",
"input.placeholderForeground": "",
"inputOption.activeBorder": "",
"inputValidation.errorBackground": "",
"inputValidation.errorBorder": "",
"inputValidation.infoBackground": "",
"inputValidation.infoBorder": "",
"inputValidation.warningBackground": "",
"inputValidation.warningBorder": "",
// Scroll Bar Control
"scrollbar.shadow": "",
"scrollbarSlider.activeBackground": "",
"scrollbarSlider.background": "",
"scrollbarSlider.hoverBackground": "",
// Badge — Badges are small information labels, for example, search results count.
"badge.foreground": "",
"badge.background": "",
// Progress Bar
"progressBar.background": "",
// Lists and Trees — Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.
"list.activeSelectionBackground": "",
"list.activeSelectionForeground": "",
"list.dropBackground": "",
"list.focusBackground": "",
"list.focusForeground": "",
"list.highlightForeground": "",
"list.hoverBackground": "",
"list.hoverForeground": "",
"list.inactiveSelectionBackground": "",
"list.inactiveSelectionForeground": "",
"list.inactiveFocusBackground": "",
"list.invalidItemForeground": "",
// Activity Bar — The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.
"activityBar.background": "",
"activityBar.dropBackground": "",
"activityBar.foreground": "",
"activityBar.border": "",
"activityBarBadge.background": "",
"activityBarBadge.foreground": "",
// Side Bar — The Side Bar contains views like the Explorer and Search.
"sideBar.background": "",
"sideBar.foreground": "",
"sideBar.border": "",
"sideBar.dropBackground": "",
"sideBarTitle.foreground": "",
"sideBarSectionHeader.background": "",
"sideBarSectionHeader.foreground": "",
// Editor Groups & Tabs — Editor Groups are the containers of editors. There can be up to three editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.
"editorGroup.background": "",
"editorGroup.border": "",
"editorGroup.dropBackground": "",
"editorGroupHeader.noTabsBackground": "",
"editorGroupHeader.tabsBackground": "",
"editorGroupHeader.tabsBorder": "",
"tab.activeBackground": "",
"tab.activeForeground": "",
"tab.border": "",
"tab.activeBorder": "",
"tab.unfocusedActiveBorder": "",
"tab.inactiveBackground": "",
"tab.inactiveForeground": "",
"tab.unfocusedActiveForeground": "",
"tab.unfocusedInactiveForeground": "",
"tab.hoverBackground": "",
"tab.unfocusedHoverBackground": "",
"tab.hoverBorder": "",
"tab.unfocusedHoverBorder": "",
// Editor Colors — for syntax highlighting, use the editor.tokenColorCustomizations setting. All other editor colors are listed here
"editor.background": "",
"editor.foreground": "",
"editorLineNumber.foreground": "",
"editorLineNumber.activeForeground": "",
"editorCursor.background": "",
"editorCursor.foreground": "",
"editor.selectionBackground": "",
"editor.selectionForeground": "",
"editor.inactiveSelectionBackground": "",
"editor.selectionHighlightBackground": "",
"editor.selectionHighlightBorder": "",
"editor.wordHighlightBackground": "",
"editor.wordHighlightBorder": "",
"editor.worldHighlightStrongBackground": "",
"editor.wordHighlightStrongBorder": "",
"editor.findMatchBackground": "",
"editor.findMatchHighlightBackground": "",
"editor.findRangeHighlightBackground": "",
"editor.findMatchBorder": "",
"editor.findMatchHighlightBorder": "",
"editor.hoverHighlightBackground": "",
"editor.lineHighlightBackground": "",
"editor.lineHighlightBorder": "",
"editorLink.activeForeground": "",
"editor.rangeHighlightBackground": "",
"editor.rangeHighlightBorder": "",
"editorWhitespace.foreground": "",
"editorIndentGuide.background": "",
"editorRuler.foreground": "",
"editorCodeLens.foreground": "",
"editorBracketMatch.background": "",
"editorBracketMatch.border": "",
"editorOverviewRuler.border": "",
"editorOverviewRuler.findMatchForeground": "",
"editorOverviewRuler.rangeHighlightForeground": "",
"editorOverviewRuler.selectionHighlightForeground": "",
"editorOverviewRuler.wordHighlightForeground": "",
"editorOverviewRuler.wordHighlightStrongForeground": "",
"editorOverviewRuler.modifiedForeground": "",
"editorOverviewRuler.addedForeground": "",
"editorOverviewRuler.deletedForeground": "",
"editorOverviewRuler.errorForeground": "",
"editorOverviewRuler.warningForeground": "",
"editorOverviewRuler.infoForeground": "",
"editorError.foreground": "",
"editorError.border": "",
"editorWarning.foreground": "",
"editorWarning.border": "",
"editorInfo.foreground": "",
"editorInfo.border": "",
"editorHint.foreground": "",
"editorHint.border": "",
"editorGutter.background": "",
"editorGutter.modifiedBackground": "",
"editorGutter.addedBackground": "",
"editorGutter.deletedBackground": "",
// Diff Editor Colors — For coloring inserted and removed text, use either a background or a border color but not both.
"diffEditor.insertedTextBackground": "",
"diffEditor.insertedTextBorder": "",
"diffEditor.removedTextBackground": "",
"diffEditor.removedTextBorder": "",
// Editor Widget Colors - The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover
"editorWidget.background": "",
"editorWidget.border": "",
"editorSuggestWidget.background": "",
"editorSuggestWidget.border": "",
"editorSuggestWidget.foreground": "",
"editorSuggestWidget.highlightForeground": "",
"editorSuggestWidget.selectedBackground": "",
"editorHoverWidget.background": "",
"editorHoverWidget.border": "",
"debugExceptionWidget.background": "",
"debugExceptionWidget.border": "",
"editorMarkerNavigation.background": "",
"editorMarkerNavigationError.background": "",
"editorMarkerNavigationWarning.background": "",
"editorMarkerNavigationInfo.background": "",
// Peek View Colors — Peek views are used to show references and declarations as a view inside the editor.
"peekView.border": "",
"peekViewEditor.background": "",
"peekViewEditorGutter.background": "",
"peekViewEditor.matchHighlightBackground": "",
"peekViewResult.background": "",
"peekViewResult.fileForeground": "",
"peekViewResult.lineForeground": "",
"peekViewResult.matchHighlightBackground": "",
"peekViewResult.selectionBackground": "",
"peekViewResult.selectionForeground": "",
"peekViewTitle.background": "",
"peekViewTitleDescription.foreground": "",
"peekViewTitleLabel.foreground": "",
// Merge Conflicts — Merge conflict decorations are shown when the editor contains special diff ranges.
"merge.currentHeaderBackground": "",
"merge.currentContentBackground": "",
"merge.incomingHeaderBackground": "",
"merge.incomingContentBackground": "",
"merge.border": "",
"merge.commonContentBackground": "",
"merge.commonHeaderBackground": "",
"editorOverviewRuler.currentContentForeground": "",
"editorOverviewRuler.currentContentForeground": "",
"editorOverviewRuler.commonContentForeground": "",
// Panel Colors — Panels are shown below the editor area and contain views like Output and Integrated Terminal.
"panel.background": "",
"panel.border": "",
"panel.dropBackground": "",
"panelTitle.activeBorder": "",
"panelTitle.activeForeground": "",
"panelTitle.inactiveForeground": "",
// Status Bar Colors — The Status Bar is shown in the bottom of the workbench.
"statusBar.background": "",
"statusBar.foreground": "",
"statusBar.border": "",
"statusBar.debuggingBackground": "",
"statusBar.debuggingForeground": "",
"statusBar.debuggingBorder": "",
"statusBar.noFolderForeground": "",
"statusBar.noFolderBackground": "",
"statusBar.noFolderBorder": "",
"statusBarItem.activeBackground": "",
"statusBarItem.hoverBackground": "",
"statusBarItem.prominentBackground": "",
"statusBarItem.prominentHoverBackground": "",
// Title Bar Colors (macOS)
"titleBar.activeBackground": "",
"titleBar.activeForeground": "",
"titleBar.inactiveBackground": "",
"titleBar.inactiveForeground": "",
"titleBar.border": "",
// Notification Colors — Notification toasts slide up from the bottom-right of the workbench.
"notificationCenter.border": "",
"notificationCenterHeader.foreground": "",
"notificationCenterHeader.background": "",
"notificationToast.border": "",
"notifications.foreground": "",
"notifications.background": "",
"notifications.border": "",
"notificationLink.foreground": "",
// Extensions
"extensionButton.prominentForeground": "",
"extensionButton.prominentBackground": "",
"extensionButton.prominentHoverBackground": "",
"pickerGroup.border": "",
"pickerGroup.foreground": "",
// Integrated Terminal Colors
"terminal.background": "",
"terminal.foreground": "",
"terminal.ansiBlack": "",
"terminal.ansiBlue": "",
"terminal.ansiBrightBlack": "",
"terminal.ansiBrightBlue": "",
"terminal.ansiBrightCyan": "",
"terminal.ansiBrightGreen": "",
"terminal.ansiBrightMagenta": "",
"terminal.ansiBrightRed": "",
"terminal.ansiBrightWhite": "",
"terminal.ansiBrightYellow": "",
"terminal.ansiCyan": "",
"terminal.ansiGreen": "",
"terminal.ansiMagenta": "",
"terminal.ansiRed": "",
"terminal.ansiWhite": "",
"terminal.ansiYellow": "",
"terminal.selectionBackground": "",
"terminalCursor.background": "",
"terminalCursor.foreground": "",
// Debug
"debugToolBar.background": "",
// Welcome Page
"welcomePage.buttonBackground": "",
"welcomePage.buttonHoverBackground": "",
"walkThrough.embeddedEditorBackground": "",
// Git Colors
"gitDecoration.modifiedResourceForeground": "",
"gitDecoration.deletedResourceForeground": "",
"gitDecoration.untrackedResourceForeground": "",
"gitDecoration.ignoredResourceForeground": "",
"gitDecoration.conflictingResourceForeground": ""
}

Answer 2

Workbench color customizations should be contributed by the theme itself, not through the settings.
In your theme's theme.json, just create a section called colors:
{
"type": "dark",
"colors": {
"editor.background": "#1e1e1e",
"editor.foreground": "#d4d4d4",
"editorIndentGuide.background": "#404040",
"editorRuler.foreground": "#333333",
"activityBarBadge.background": "#007acc",
"sideBarTitle.foreground": "#bbbbbb",
...
},
"tokenColors": "./YourTheme.tmTheme"
}
Here are our docs on contributing workbench colors. Take a look at some builtin themes for examples of this.