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
}
Related
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.
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.
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"
In my Eclipse installation, the selected entry in the content assist menu is almost unreadable because the colour is white on white-greyish. See image below.
I can change the background and text colour of the non-selected entries in the list from eclipse preferences, but the selected entry is always the same colour and is always unreadable. I use the Eclipse Color Theme RecognEyes, but that should only affect the editor as far as I understand.
How do I make the text of the selected entry in the context assist menu readable?
Update
After reading m1shk4's answer it does indeed seem that Eclipse takes it's colours from the current gnome theme. However it does this in a kind of weird way.
The background colour of the content assist "window" is the input boxes background colour, and the text colour is the input boxes text colour. This all seems logical.
However the background colour of the selected entry is the windows background colour, but the text of the selected entry is not the background text colour.
See image below for an illustration.
Does anybody know how to fix or workaround this issue?
Working workaround
It seems this issue is rather specific with the default gnome theme in Ubuntu. Switching to another gnome theme solves the issue for me.
Not sure if it's still in time but this might help all of you who are having the same problem, as I had:
Create a file ~/.gtkrc-2.0 and add this content to the file:
style "eclipse_fix"
{
base[ACTIVE] = shade(0.7, "#4283d3")
}
class "GtkTreeView" style "eclipse_fix"
Then just set Unity a new theme (in Configuration > appearance) and set again to the previous theme (Ambiance for instance). That will read the new file created above and the new color will take effect in eclipse.
I'm on Eclipse Neon and using Eclipse Color Themes.
I've solved this issue by:
Window-> Preferences-> General-> Appearance:
->Uncheck "Use mixed fonts and colors for labels."
Windows > Preference > General > Appearance > Color and Fonts
Basic > Content Assist background color, Content Assist foreground color:
and voilà!
Update
Interface is in Russian, but I think it's clear that colors, you're looking for, correspond to Selected Items entry. On my screenshot its light-blue for background and black for foreground.
If you are on Ubuntu / Unity, go ahead and install and start gnome-color-chooser.
Global Colors -> Default Configuration, Entry Fields -> selected and change fg and bg colors according to your needs.
I have the same issue on Windows 7. I found that text color(unselected text) of the content assist box can be changed under:
Desktop->Personalize->Window Color->Advanced Appearance Settings->Item->MessageBox
The only problem is one cannot set the background color for the MessageBox. -> any help from someone else?
At least this way you can read something...
NOTE: Be warned that a lot of other applications may depend on the messageBox color!
I was able to fix this in Ubuntu 12.04 by editing a file in the theme (I use Radiance):
sudo vi /usr/share/themes/Radiance/gtk-2.0/gtkrc
At the top is a key "gtk-color-scheme" with a bunch of color variables that are used later in the file. I make these changes: tooltip_fg_color:#000000 selected_fg_color:#000000 tooltip_bg_color:#f5f5b5
After making the changes, change your theme to something else then back, and most everything looks better! I did have to restart eclipse to get the fonts in the borders of the window to update.
Note that unfortunately these changes get overwritten sometimes during updates. There may be a way to use ~/.gtkrc-2.0 to do the same thing, I just don't know anything about that file.
Recently after scorching my retinas from the garish white background in Eclipse, I found some of the excellent posts about how to change the colors so it uses sane (i.e. dark background) colors in the editor. However, one problem present in all solutions is that background of the column with the expanders for code folding is always white. Is there a way to change the background of that column?
I'm not the only person that has this problem, as shown in the screenshots for the following questions:
Dark Color Scheme for Eclipse
Color Themes for Eclipse (application of color schemes results in this issue on a Mac, no idea about PC)
I know that the problem is not language specific as it happens in Java, Python, HTML, and everything else. Any hints on where in the pages of preferences this setting is?
This is related to Eclipse Bug 62712 which is fixed in build 20090329-2000 almost a year ago. In my Galileo of build 20090920-1017 it just works when I change the background color through General > Editors > Text Editors. Here's a screen (don't pay attention to the ugly color combo, my bg defaults to white and I just picked random yellow to demonstrate that the ruler background get changed as well):
In other words, just upgrade your Eclipse to include this bugfix. Did you check Help > Check for Updates?