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.
Related
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).
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
}
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.
I am not a huge fan of the peach color in the explorer for modified files. Searching through the color theme reference I can't seem to find an override..
https://code.visualstudio.com/docs/getstarted/theme-color-reference
I've even tried disabling extensions and I am still seeing those predefined colors.. I am using the Monokai Soda theme but that doesn't seem to be what is setting those colors in the sidebar..
Any help appreciated - it's kinda driving me crazy..
ANSWER
Needed a combo of error style and git overrides, see answer below:
"workbench.colorCustomizations": {
"list.errorForeground": "#b3e5ec",
"list.warningForeground": "#00d9ff",
"gitDecoration.modifiedResourceForeground": "#00ffb3",
"gitDecoration.untrackedResourceForeground": "#f7aeae"
}
Turns out that the colour you're seeing isn't due to modified content. It's due to having problems/errors in your file. If you hover over the file name you should see x problems detected in this file.
To change the colour of those, you can use
"workbench.colorCustomizations": {
"list.errorForeground": "#00AA00"
}
The colour for modified files looks like the colour that settings.json is highlighted in, aka light green.
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"