How to change the color of explorer items of vscode - visual-studio-code

As this screenshot shows, vscode has multiple sections that I can click, But because of my color scheme, I can hardly see which one I'm selecting right now.
picture 1
I already know that using settings like
"workbench.colorCustomizations": {
"list.focusBackground": "#571863",
"list.inactiveFocusBackground": "#56186393",
}
can change the background color of the focused file or directory(shown as picture2).
picture 2
But those settings can't change the background color of selected sections.
And I also want to know how to switch between those sections (e.g. in this picture, OUTLINE, TIMELINE, JAVAPROJECTS) using the keyboard only.
Thanks in advance.~~~~~

Add this to your settings.json.
{
"workbench.colorCustomizations": {
"sideBar.foreground": "#9A9A9A"
}
}
Source:
https://code.visualstudio.com/api/references/theme-color#side-bar

Related

Change the text color only of selected text in Vs Code

I want to change the color of selected text only not the background so what is the way to do it because I am not getting anything to change the selected text only, I am getting solution to change the background but not the text.
Here I have attached one image in which I have selected editor but text color is still green so want the text color in black after selection so is there any way to change it.
Please let me know if you have any suggestion.
Unfortunately this is a long-time open bug in VS Code:
https://github.com/microsoft/vscode/issues/36490

VS Code, remove the dotted border around the hovered item of the suggestion pop-up (IntelliSense)

With the following "settings.json", I could change the colours of the suggestion pop-up like the screenshot. The problem is that I could not remove the dotted-line around the hovered item. How can I remove it?
"workbench.colorCustomizations": {
"editorSuggestWidget.selectedBackground": "#351407",
"editorSuggestWidget.selectedForeground": "#f1f0dc",
"list.hoverBackground": "#555555",
}

How to change the background color of the Settings page and not the Editor?

How do I change the background color of the Settings page, not the Editor, but the Settings page? I know it probably involves changing a workbench.colorCustomization token, but I don't know which one it is or if it even exists. Also, is there some sort of extension that allows you to inspect the UI elements/icons of VS Code?
I have already tried changing the editor.background token, which applied to not just the Editor, but also the Welcome and Settings pages. I was able to change the background color for the Welcome page using the welcomePage.background token, but I don't know how to change it for Settings.
I want the Settings background color to change so I can see it better.
It doesn't look like you can. If under workbench.colorCustomizations you type settings you will get the list of available settings page items of which you can change the color.
Perhaps one or more of the foreground colors to change the text color will help you.
The Custom CSS and JS Loader may allow you to change the color of the settings page. You can inspect vscode's elements by Help/Toggle Developer Tools to find out what element you need to target with that extension.
<div class="settings-editor " or a child of that. Set its background-color to what you want using that extension.

jstree checkmark color from green to black

I am using jstree to place my departments in a tree org configuration. I would like to change the color of the checkmark from green to black color and I am not seeing how to do that. Does any one have an idea on how to change the checkmark color on jstree?
thank you for your help
Brian
The green checkmark is an image which is available in the themes in the jsTree library. You could edit this image and change the color of the checkmark. The image used is available under dist > themes > default > 32px.png
Here's the github link
https://github.com/vakata/jstree/blob/master/dist/themes/default/32px.png
Alternatively you could also use the dark theme available in the jsTree distribution.
"core": {
"themes": { "name": "default-dark" }
},

Change the font color of the results shown in the suggestion widget when typing

I want to change the font color of the text typed in the keyboard shown in the suggestion widget when the autocomplete feature starts to filter the results.
When you are typing, the results in the suggestion widget change the color of the characters that match what has been typed.
What is the name of the property that does that?
In VSC press ctrl+comma to open the settings and search for the property workbench.colorCustumizations.
There's just a few properties regarding the suggestion widget, I tried them all but I couldn't hit the one.
This is the ss asked by Alex
In time: the virtual keyboard is in the ss cuz my laptop's keyboard went *oo.
Ok so in the suggestion box there is the color for the overall text of the results (white), the color of the text been typed in the editor (red) and the color of the text for the highlighted result in the box (green background).
I want to change the font color for the text that was highlighted by the user (ether by the mouse or the keyboard) because it's hard to see the white text in the green background and I don't want to give up my green lemon.
I hope I was able to explain it so you can understand. Thanks.
Only doable with extension: Custom CSS and JS Loader
.suggest-widget .monaco-list-row.focused {
color: #ff6a00;
}