I want to change background of this select box, but i didn't find any properties for this.
In the above example, the select box has dark color, how I can change it?
I know I should add particular property to the workbench.colorCustomizations, but I don't know what to add.
You need to change dropdown.background property in your setting.json file. Specifically,
"workbench.colorCustomizations": {
"dropdown.background": "#ff0000" // changes to red background
},
Related
I have simply question. How can i set background color for active file in unfocused sidebar in Visual Studio Code. In the picture, you can see it a little bit.
Also i'd like to ask you for another 2 things about customization.
How can i set border color on hover with transparent background.
How to set background color for active file in focused sidebar.
At the time of this writing, there are no dedicated settings for the explorer's listing colours. There are settings for list colours in general.
The settings you are looking for are:
"workbench.colorCustomizations": {
"list.inactiveSelectionBackground": "#880000",
"list.activeSelectionBackground": "#ff0000",
"list.hoverBackground": "#ff0000",
}
If you have set "explorer.autoReveal": false, you may want to remove that or set that to true.
The question is - how do I change color of scrollbar in VSCode?
I want to change my scrollbar to the color of my VSCode background. Available scrollbar settings in workbench.colorCustomizations don't change it the way I want (all I could find is scrollBarSlider and scrollbar.shadow settings), and I know there's a way to change it cause it is different in other themes (it's the same color as the background in those themes, as it should be)
How my scrollbar looks right now
(Added an arrow juuuuuust incase)
Thanks a lot!
In your settings.json:
"workbench.colorCustomizations": {
"editorOverviewRuler.background": "#ff0000", // for the "track" where the scrollThumb lives
"scrollbarSlider.background": "#9aa", // for the scrollThumb color
}
For others, see theme color reference: scrollbars and editorOverViewRuler in the same link.
Do note that there are other indicators that also live in the editorOverviewRuler, like selection indicators, find match indicators and more, which have to play nice with the color as well.
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).
I am creating my own custom theme in VS code. I am not able to select the find/Replace dialog box for setting the color. So, the question is how can we set the color to the Find/Replace dialog box?
I have already set the color to the input box inside the Find/Replace dialog box.
Try editing your settings.json
"workbench.colorCustomizations": {
"input.background": "#c21045"
},
I have gotten this
with :
"workbench.colorCustomizations": {
"editorWidget.background":"#ff0000",
},
For more information about vs code theme api:
https://code.visualstudio.com/api/references/theme-color
That's a great idea of creating custom theme.
From my point of view, VS code uses common color for same category.
Vs code uses same color variable for all input box. here it is.
"input.background": "#000"
Here is the input color Property from which, this color is applied to searchBox's input.
Note: This Property will update all input's background color.
I want to change "command palette border" color in vscode. command palette show up when you type Command+Shift+P or Ctrl+Shift+P(⇧⌘P)
I read vscode docs but I can't find solution. I am struggling to change the border color to make palette be more conspicuous.
anyone knows the solution?
The only way that I can find to do this is by modifying the contrastBorder setting.
Add this to your settings.json (Command+Shift+P or Ctrl+Shift+P(⇧⌘P) then choose "Preferences: Open Settings UI") file:
{
"workbench.colorTheme": "Theme Name",
"workbench.colorCustomizations": {
"[Theme Name]": {
"contrastBorder": "#ff0000"
}
}
}
Beware, this also changes the border color of a lot of other layout elements.
To add to #Taylor's answer, it is the quickInput's border specifically you would want to change. But there doesn't appear to be a setting to allow that.
You could change the command palette's background to help your problem using:
"quickInput.background": "#333", // command palette(s) bg
"quickInput.foreground": "#fff",
contrastBorder does work but changes the border color of a couple of other elements as well.