Change text highlight settings in Visual Studio Code for macOS - visual-studio-code

In Visual Studi Code for macOS (Version: 1.72.2), how do I change the settings for how certain text is highlighted. In the include screenshot, the highlight for the Find result (the word buret in buret.addEventListener is barely noticeable among the other highlighted words (button, enable, etc.)
Thanks in advance!
Searched through settings which is far too big to easily find it.


You can customize your theme colors. The colors you are looking for are your editor colors.
Press Ctrl+Shift+P to bring up the command palette and run the Preferences: Open JSON Settings command. Add the following lines to your configuration:
"workbench.colorCustomizations": {
"editor.findMatchBackground": "#00ff00",
"editor.findMatchHighlightBackground": "#ff0000",
},
This will change the background color of the active find match to green and of all other find matches to red. Adjust the colour values as you like.

Related

How do I change color of terminal prompt in Visual studio code?

My current terminal has white prompt and white output
like this one https://vscode.one/img/terminal-font-size/terminal-font-size.gif
I Saw this thread about changing terminal color Color theme for VS Code integrated terminal
Foreground changes the color of entire text, but I just want to see color different between the path and output. Similar to this one
The output is white and the path is other color.

Click ctrl+shift+P and then search and Open User Setting (JSON)
Paste the JSON settings below to change basic colors
"workbench.colorCustomizations": {
"terminal.background": "#2C3E50",
"terminal.foreground": "#E0E0E0",
}
For a higher level of colour customizations, you can use this Terminal Colors Generator. It will create JSON with all colours you selected and just paste it into your settings JSON.

VSCode - Text highlight in "find" box

I recently installed VSCode on a new machine, but found something odd about highlighted text in the "find" box.
How would one change the highlight color in this field in VS Code?

Oddly, it is just
"workbench.colorCustomizations": {
"selection.background": "#ff0000",
}
Stumbled on it at theme base colors:
selection.background: Background color of text selections in the
workbench (for input fields or text areas, does not apply to
selections within the editor and the terminal).

selected text background color for Visual Studio Code quick search (ctrl+f) input

I've searched for this setting for a while now, but just can't find it. How can I change the background color of selected text in the search box? Here is an example - as you can see (or not), foo is selected. I'd like to change the background color of that selection.

Oddly, it is just
"workbench.colorCustomizations": {
"selection.background": "#ff0000",
}
Stumbled on it at theme base colors:
selection.background: Background color of text selections in the
workbench (for input fields or text areas, does not apply to
selections within the editor and the terminal).

Change Visual Studio Code's title bar color

Is there a way to change the Title Bar color for Visual Studio Code (v1.26.0)?

Menu File → Preferences → Settings
Look for "window.titleBarStyle": "native", copy it to your user settings, and change it to "window.titleBarStyle": "custom". It will adapt your theme now.
If the current color is not what you want or you want to tweak it, try doing this.
In your user settings, add the following.
"workbench.colorCustomizations": {
"[Name of the Current Theme you are using]": {
"titleBar.activeBackground": "#191919cc",
"titleBar.activeForeground":"#ffffff",
},
},
"window.titleBarStyle": "custom"

Open menu File → Preferences → Settings and add the following setting:
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#553955" // Change this color!
},
"window.titleBarStyle": "custom"
From the following source:
Colorful Visual Studio Code titlebars for better productivity

There is now a handy Visual Studio Code marketplace plugin called Window Colors which automatically colors the activitybar and titlebar of every window uniquely.
Just go to extensions and type: window colors
For more information, see the Visual Studio Code marketplace webpage.
Edit (Sept 2020): Just noticed that on Ubuntu 20.04 I had to set the preferences->titlebar setting from native to custom in the VSCode Preferences. Otherwise the titlebar does not change colors. Also see this issue on github here- the input from #musicfuel solved it for me.

John Papa launched Peacock a few months back. I've been using the same since then.
It's an easy-to-use plugin with a great set of commands to work with.
It is highly customize-able.
Also it has emphasis on BrandColors which comes in handy when you're simultaneously working on several different projects involving different frameworks and libraries.

In case somebody is still interested. I am using Color Stamp plug
For further tweaks, I changed the following parameters in my vscode project settings
.vscode\settings.json
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#7C21D7",
"titleBar.border": "#ebe8e8",
"titleBar.inactiveBackground": "#7c21d77c",
"titleBar.activeForeground": "#ebe8e8",
"statusBar.background": "#7C21D7",
"statusBar.debuggingBackground": "#7C21D7",
"statusBar.noFolderBackground": "#7C21D7",
"statussBar.prominentBackground": "#7C21D7",
"statusBar.foreground": "#ebe8e8"
}

Note that VSCode 1.45 (April 2020) will offer additional settings:
New theme colors for editor tabs
Some new colors where added to further theme workbench editor tabs:
tab.unfocusedInactiveBackground: Inactive tab background color in an unfocused group
tab.hoverForeground: Tab foreground color when hovering
tab.unfocusedHoverForeground: Tab foreground color in an unfocused group when hovering
New theme color for editor title border
The existing color editorGroupHeader.tabsBorder changed to render a border below tabs but above breadcrumbs.
A new color editorGroupHeader.border allows to render a border below the editor group header (i.e. below breadcrumbs if enabled) to restore the previous behaviour of editorGroupHeader.tabsBorder.

Please apply these simple steps.
Menu File → Preferences → Settings
Look for "window.titleBarStyle": "native", and change it to "window.titleBarStyle": "custom". It will adapt your theme now.
If the current color is not what you want or you want to tweak it, try doing this.
In your user settings, add the following.
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#191919cc",
"titleBar.activeForeground":"#ffffff",
},

I've created a simple Visual Studio Code plugin which accepts a list of regular expressions and colors and changes the titleBar based on them. It's great for working on mono repositories or large projects with multiple packages (like Lerna, or React + React Native)
ColorTabs

Changing the theme of Visual Studio Code will change the title bar color.
Menu File → Preferences → Color theme
Then switch to a different color theme, this will change the title color.

How to customize command palette color and keybindings when creating vscode theme

Creating a VSCode theme for myself. I like the color configuration I have at the moment, but when I open the command palette, it is 'see-through' making it hard to read. How can I configure the palette when designing my theme?

V1.36 added these two colorCustomizations for the command palette/quick open panel:
"quickInput.background": "#ff0000",
"quickInput.foreground": "#fff"
Thanks to add color controls to quick open panel PR.
And those keybindings shown to the right of each command will be themeable in v1.56 (in Insiders already). See https://github.com/microsoft/vscode/commit/a3444b121230a97f3ae07304780ea130ea092542
"workbench.colorCustomizations": {
"keybindingLabelBackground": "#f00",
"keybindingLabelForeground": "#f00",
"keybindingLabelBorder": "#f00",
"keybindingLabelBottomBorder": "#f00",
"keybindingLabelShadow": "#f00"
}

To change the background of the command palette, modify the sideBar.background setting. More info
I had the exact same problem as you so I went hunting for it in the docs. At first I thought it was a list colour setting because changing list.focusBackground changes the selected item in the command palette.