VSCode: tab color not responding to customization - visual-studio-code

I've set up custom colors for the tabs to make them easier to see active vs. inactive, but on some tabs - and I can't find a pattern to it, the customization doesn't stick. The foreground color is red or pink, and it should be light gray.
Settings JSON file is in the picture, and I can't find any other settings that refer to "tabs", so what am I missing?
Thanks!

I've broken it down for the items you have in your file using my own as an example with vibrant colors to help distinguish them:
My setting.json:
"workbench.colorCustomizations": {
"[Default Dark+]": {
"tab.activeBackground": "#0004ff",
"tab.activeForeground": "#e100ff",
"tab.inactiveBackground": "#00ff62",
"tab.inactiveForeground": "#00b7ff",
"tab.lastPinnedBorder": "#fafafa",
"tab.unfocusedActiveForeground": "#fbff00",
"tab.unfocusedActiveBackground": "#ff0000",
}
}
Corresponding components (it's best if you enlarge the image):
Notes:
Groupings matter - the properties only apply to the currently active/inactive group. A group is each active editor window. In my picture, there are two groups, with the active one on the left (in focus) and the inactive one on the right (out of focus). The tooltips to all of these properties state they apply to groupings. For example, tab.activeBackground's tool tip states the following:
Active tab background color in an active group
The tab.lastPinnedBorder property only applies to the last tab that was pinned (as the name would suggest). Personally I feel this is a bizarre option. If I were to pin a new tab, the white line would move to said tab.
The property names are slightly misleading. If it doesn't have the word "unfocused" in it, it means the active group (yet these property names do not contain the word "focused").
Make sure you have the correct theme selected in your settings that corresponds to the theme you are specifying in your JSON. In my example I have the [Default Dark+] theme selected in my settings (it's actually called Dark+ (default dark) in the drop down in the settings), thus my individual JSON properties are applied. I believe Dark+ is the default when you first install Visual Studio Code (unless it goes off of the systems preferred color theme - I'm not sure if it does).

Related

How to change Live Server / Five Server status bar foreground color in VS Code?

After i click "Go live" in VS Code lower right corner it starts extension and turns into http://127.0.0.1:5555 with orange text color.
How do i change it to other color?
I tried changing/adding multiple items in settings.json but without success. I am able to change anything except this.
Also looked at https://code.visualstudio.com/api/references/theme-color but can't find solution.
Maybe this needs to be changed on extension level?
This is last step in my perfect light/dark theme customization i need.

Customizing VSCode theme: how to keep original icon color for the focused item in autocomplete list?

The February 2021 version brought a breaking change for the colors of autocomplete lists:
https://code.visualstudio.com/updates/v1_54#_updated-listtree-ui
Where we have the following settings for the colors of the focused item:
quickInputList.focusIconForeground
quickInputList.focusForeground
quickInputList.focusBackground
The three work fine.
However, when setting focusIconForeground, it seems that we can override the color of the icon... but what if I want to keep the original color of the icon, even when the item is focused?
For example, suppose I have the following settings:
"workbench.colorCustomizations": {
"[Default Light+]": {
"quickInputList.focusIconForeground": "#ff0000",
"quickInputList.focusForeground": "#000000",
"quickInputList.focusBackground": "#e0e0e0",
},
},
If so, this is the rendered autocomplete list:
See how the icon of the focused item is red. I want it to remain purple, its original color.
So, what setting can I use in quickInputList.focusIconForeground to keep the icon at its original color?
As a side note... I'm using "Default Light+" theme, but I noticed that many other themes (like "Quiet Light" and "Monokai") do exactly what I'm trying to do.
I had to dig into the actual source code of VSCode in order to find this. What happen is: the suggestion box icon is called product icon, which is actually a glyph icon font that can be themed. It ships with no color, because the color is defined by the active color theme.
When the suggestion box is rendered, VSCode checks if current theme has defined a color to the icon. If there is no color, a default color is given according to the icon type. However, if the color theme defined a color to the icon, this color is used, regardless of the icon type – that is, the theme overrides the color. The parameter for this color is editorSuggestWidget.selectedIconForeground, as noted in JayDev's answer. The code which does this can be seen here.
Now the theme I'm using, "Default Light+", does override this color, and there is no way to clear this overriding in VSCode settings file. Other themes do not override, and those themes show the original icon color, which is the behavior I want. So, what I had to do was simply modify the theme, inside VSCode installation folder, commenting out the offending line, which can be found here. For reference, in VSCode installation folder, it's line 28 of this file:
resources\app\extensions\theme-defaults\themes\light_vs.json
The line itself to be commented out is:
"list.activeSelectionIconForeground": "#FFF"
Another solution would simply be to create another theme, based off "Default Light+", with this fix. However, if the theme is updated in the future, I'd have to keep the pace, something I don't want to do. So, what I'm doing is adding this fix to this patch I wrote a while ago to automate other VSCode customizations.
Note: All source code references were taken off VSCode commit da77887 (June 10, 2021). These references may, obviously, change in the future.

VS code theme color is changed automatically

Above is today's color theme. Please see variable name SideMenu.
And another one is a picture which is taken few days ago.
You can see SideMenu color is different. It's not a problem of styled-components theme. Because every static variable's name's colors are changed.
It's not first time. few weeks ago, I had this experience and it's very annoying. Why the color theme of vs code (This is default Dark+ Theme) is changed automatically? I feel very unfamiliar with this color, and I want to stop the changing and hope to go back previous color.
How can I do that and Why this happens?
Ah! This is due to activation of Semantic Highlighting
You can disable or enable it to to get the coloring you want. Usually its enabled for default themes. If you disable it, you will get your old colors back.
You can disable/enable it here
Or you can add "editor.semanticHighlighting.enabled": false to settings.json
The is an option explorer.autoReveal in settings (either user or workspace) which controls if the explorer should automatically reveal files when opening them.
Open VS User Settings (Preferences > User Settings). This will open two side-
by-side documents.
Add a new "explorer.autoReveal": false setting to the User Settings document
on the right if it's not already there. This is so you aren't editing the
Default Setting directly, but instead adding to it.
Save the User Settings file.
Please enter your settings.json file for clear question. There might a code snippet like "workbench.preferredDarkColorTheme": "Default Dark+ Experimental" or "workbench.colorTheme": "so and so" in the settings.json. You have to remove this, because this might set your default theme to some preset theme. So, you will not be able to change your Color Theme on a fresh start.

How to theme the reference popup window in the VS Code editor

I'm creating a custom colour theme extension for Visual Studio Code and I can't find out how to customise the colours for certain parts of the user interface. The theme is complete, apart from customising the reference popup window.
Here is the popup window I'm trying to customise:
I wish to change the blue background and if possible, the blue border lines. I'm sure this can be done because some of the built-in themes do so. Does anyone have an idea what I would need to put into the colour theme file to achieve this?
I'm also looking for pointers to customise the status bar colour (at the base of the editor).
As far as I know, this is not possible.
Some of the built-in themes are build differently. Most themes are textmate style themes, but you can see here that some of the built-in themes are .json files and are somehow handled differently.
You can find the theme documentation here. Specifically, this part is relevant:
Besides the TextMate language grammar standard scopes, VS Code also
has custom theme settings which you can use to tune your own theme:
rangeHighlight: Background color of range highlighted, like by Quick open and Find features.
selectionHighlight: Background color of regions highlighted while selecting.
inactiveSelection: Background color of selections when not in focus.
wordHighlight: Background color of a symbol during read-access, like reading a variable.
wordHighlightStrong: Background color of a symbol during write-access, like writing to a variable.
findMatchHighlight: Background color of regions matching the search.
currentFindMatchHighlight: Background color of the current region matching the search.
findRangeHighlight: Background color of regions selected for search.
linkForeground: Color of links.
activeLinkForeground: Color of active links.
hoverHighlight: Background color when hovered.
referenceHighlight: Background color of a reference when finding all references.
guide: Color of the guides displayed to indicate nesting levels.
You can find an example VS Code theme here which includes the custom
settings.
As we can see here, there is no special override for the references pane.
We can, though, see in the code that the dark blue for dark themes and the light blue for light themes that you're seeing in the references pane is a default value set in code here.
The colours for the UI itself are stored in the following file (ubuntu): /usr/share/code/resources/app/out/vs/workbench/electron-browser/workbench.main.css
You can edit that, or wait for March 2017 where a new version will be released which will allow customising these colours more easily.
Revisiting this in Sept/2022 out of necessity, I confirmed VS Code 1.70 has native support for manipulating colors for the Go to References/Definitions and Peek... overlays.
Change the overlay background and border as follows, but there's lots of other settings too; see peekView*
"workbench.colorCustomizations": {
"peekViewEditor.background": "#01041a",
"peekViewResult.background": "#054c8a",
"peekView.border": "#04fafa"

How to modify color of inactive line in code assist in Eclipse?

First of all, there is already a similar question, but these answers don't help.
As already mentioned in the topic, I'd like to modify the color of the inactive line in code assist (without changing other areas) because white on light grey background is hardly seen.
"Colors and fonts" just contain "Content assist foreground/background color", this only changes the foreground/background of the whole code assist but not of the active or inactive line. There doesn't seem to be an option for this. Is it possible to change this in a different way, maybe with some kind of stylesheet?
After tinkering around for hours I found the solution. The related GTK class is GTKTreeView, the corresponding widget state is base[ACTIVE]. Unfortunately, a color change will affect other GTKTreeViews in Eclipse too (e.g. the tree view in project explorer, but for me it doesn't matter). I've set the background color of the list items to hex #AAAAAA so their look is a little bit darker now. I saved these settings als .gtkrc-eclipse in my home dir:
style "eclipse" {
font_name = "Sans Condensed 8"
}
style "listitem" {
base[ACTIVE] = "#AAAAAA"
}
class "GtkWidget" style "eclipse"
class "GtkTreeView" style "listitem"
..and the command of my Eclipse launcher looks like this:
env GTK2_RC_FILES=/usr/share/themes/Ambiance/gtk-2.0/gtkrc:/home/myuser/.gtkrc-eclipse '/opt/eclipse/eclipse'
I'd say it's system-dependent. Try playing with system default colors on Preferences > Appearance > Customize > Colors. Depending on your Ubuntu theme the font could be unreadable sometimes.