How to theme the reference popup window in the VS Code editor - visual-studio-code

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"

Related

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 Sidebar Foreground Color Dimmed (Using FireFly Pro Midnight)

The foreground color of some text in my VS Code sidebar is randomly darkened out. Often, these files are files I am actively working with, and it's very difficult to navigate.
I am currently using FireFly Pro Midnight, and the only customization I have is a change to the foreground color to brighten it. The issue occurs whether I change the foreground color or not.
Does anyone know of a good way to change this coloring or the reason it is dimming out certain file names?
Darkened Text
My Only Customization
This might not be your solution, but here's what worked for me. I had the Git color status activated in my sidebar, so the title of modified files were displayed as dark blue, untracked files as dark green, and ignored files (listed in .gitignore) as almost grayish-transparent.
The ignored files were the one causing the problem, so here's the fix using theme color customization.
Go to Preferences > Open Settings (JSON), then add this custom block:
"workbench.colorCustomizations": {
"gitDecoration.ignoredResourceForeground": "#949494" // dark gray, but not faded
}

Advanced text highlight settings for eclipse-plugin

Is it possible to change default settings for the background color of highlighted expressions in the code editor?
When I place the cursor on a method, other places the method exists are grey backgrounded. The same background color appears by placing the cursor on a class. How can I change the background color of highlighted methods to red and the background color of highlighted classes to green?
What you are looking for is "Mark Occurrences". In Xtext these are computed by instances of IOccurrenceComputer. The default implementation is DefaultOccurrenceComputer. If you replace this instance with your own implementation (inside your module class using Guice) you can return your own Annotation's. You can then provide your own extensions to the annotations extension point from eclipse with colors of your choice.

Visual Studio Code, how to change background of a specific

I want to change the background of a specific scope (code.block) in VSCode as I do with sublime. sublimetext
Block comment has different background, hence it is easier to notice.
Although I made necessary modifications to relevant json file, and foreground colors displayed correctly, backgroundcolor is always overriden by the background of editor. the background field (ff0000 marked with red) changes correctly but the displayed background field (1d1a18 marked with green) is the background of the editor.
VSCode
I use meterial dark soda theme.
Anyone knows how to disable this setting.
You can't. Here's the issue tracking: #3429.

VSCode How to change the border color and border size in Hight Contrast color theme?

I am very happy when using vscode and i love the High Contrast color theme but I don't like its border (the blue border that i marked with red in the screenshot below). I have searched in the theme-default folder but i can't change it. Does anyone know how to change it?
Screenshot
I work on VSCode. This cannot be changed currently without editing our bundled UI css, which I recommend against.
Support for theming UI elements like this is being tracked by https://github.com/Microsoft/vscode/issues/3112
If you feel this color should be changed, please open a new issue or submit a PR with the proposed fix. There seem to be multiple places where the boarder color is defined. Look for css files the use #6FC3DF for border-color. .hc-black is the high contrast selector