I have these settings applied in the theme file for an extension I use:
"font-family": "Arial",
"colors": {
"activityBar.background": "#ffffff",
"activityBar.foreground": "#000000",
"activityBar.activeBorder": "#615386",
"activityBar.activeBackground": "#ff00ff",
"activityBar.activeForeground": "#ffffff",
"activityBarBadge.background": "#615386"
}
Everything is working fine apart from three values for active element of the ActivityBar. I don't understand what's wrong.. I am able to change the values for my own theme I use on a daily basis (it's based on Egoist One) using the same settings:
"workbench.colorCustomizations": {
"activityBar.activeBorder": "#ffc600",
"activityBar.activeBackground":"#3a414f",
}
I did not find any documentation that would say that these settings can't be modified in the theme file of an extension. Does anybody know why it's not working?
I can't find the option in settings to change background color which appears automatically when cursor is on some unity (token?). What's the name of this background color option?
Try adding this:
"workbench.colorCustomizations": {
"editor.selectionBackground": "#135564",
"editor.selectionHighlightBackground": "#135564"
},
OR
"workbench.colorCustomizations": {
"editor.findMatchBackground": "#00cc44a8",
"editor.findMatchHighlightBackground": "#ff7b00a1"
},
for more details see this POST
I'm fully able to move my TreeView from the SideBar to the bottom panel (Problems, output, terminal...).
However, I'm uncertain how I would go about making my TreeView appear in the bottom panel by default. The documentation doesn't state anything about the bottom panel.
Any ideas?
I see the panel as an option for the viewContainer as in:
"contributes": {
"viewsContainers": {
"panel" : [ // instead of activityBar here
{
"id": "your virewContainer id",
"title": "your title",
"icon": "$(....)"
}
]
}
}
Found by using intellisense.
In VSCode, is there a way to hide the top action menu bar that appears in the tabs row? I rarely use it and I find that it crowds the already limited space available to browse through open tabs. Moreover, its presentation is also inconsistent, especially when split panes are activated.
I'm not sure if I am referring to this VSCode functionality properly, so here's a screenshot demonstrating what I'm talking about (file names had to be blurred out due to NDA reasons):
Thank you.
Update 2022-09-28
An issue to address this feature has been completed and it will arrive with the next release. It is already available on the Insiders version.
This closed issue references another feature request different from the original one referenced on this answer.
Context
It is called editor actions and, within the standard/native VSCode settings, you cannot hide it.
A setting to hide this annoying bar is an open issue at VScode's GitHub since March 2018.
Fixes
Removing the whole bar
I feel your pain. This worked for me:
Install the Customize UI extension.
Open your user settings JSON:
cmd + shift + P / ctrl + shift + P
Add this setting:
"customizeUI.stylesheet": {
".editor-actions": "display: none !important;",
},
It is gone!
Removing specific icons, by position
The foremost left icon is the number 1.
Example in plain CSS:
.menu-item-action-item-icon-1,
.menu-item-action-item-icon-3 {
display: none !important;
}
Example using Customize UI extension:
"customizeUI.stylesheet": {
".menu-item-action-item-icon-1": "display: none !important;",
".menu-item-action-item-icon-3": "display: none !important;",
},
Removing just Gitlens icons
Gitlens icons can be hidden within Gitlens' settings:
"gitlens.menus": {
"editorGroup": {
"blame": false,
"compare": false
},
},
I came up with a slightly different approach: instead of hiding the buttons, move them down one level to the breadcrumb bar:
This is done using the Customize UI extension with the following configuration:
"customizeUI.stylesheet": {
".tabs-and-actions-container": {
"background-color": "inherit",
},
".tabs-and-actions-container .editor-actions": {
"position": "absolute",
"top": "100%",
"right": "0px",
"height": "22px !important",
"z-index": "1",
"background-color": "inherit",
},
".tabs-and-actions-container .editor-actions .action-item": {
"margin-right": "3px !important",
},
".tabs-and-actions-container .editor-actions .action-item a": {
"font-size": "13px",
},
".tabs-and-actions-container .editor-actions .action-item .codicon": {
"width": "13px",
"height": "13px",
},
".tabs-and-actions-container .tab:last-child": {
"margin-right": "0 !important",
},
".title.tabs.show-file-icons": {
"overflow": "unset !important",
},
}
This solution is theme-independent, so it should work for all colour combinations. The background color for the buttons is always the same as the background color of the tab bar. If you use only one static theme, you could hard-code the background-color for the .tabs-and-actions-container .editor-actions selector to the exact color of the breadcrumb bar for a more seamless design. However, this does not work when switching themes.
The only drawback to this solution is that the buttons overflow the rightmost breadcrumb information, but I'm fine with that. At least the tab bar does not resize anymore, while I still have those buttons.
Hi there 👋🏼 I removed the GitLens plugin and it disappeared
For anyone using Customize UI and not getting the icons to disappear after targeting ".editor-actions", I was able to get the action icons to disappear by selecting ".monaco-toolbar":
"customizeUI.stylesheet": {
".monaco-toolbar": "display: none !important"
}
Not sure if this feature is included in the VSCode settings yet, but I'd love to change the ruler color from it's default grey.
Tried:
"editor.rulers.color": "color"
But got an "unknown configuration setting error.
From the February 2020 v1.43 release, you can set per-ruler colors. Use like this:
"editor.rulers": [
{
"column": 80,
"color": "#ff00ff"
},
100, // a ruler with the default or editorRuler.foreground color at column 100
{
"column": 120,
"color": "#ff0000"
},
],
See the release notes here: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_43.md#multiple-rulers-with-different-colors
In settings.json:
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff333388"
}
File -> Preferences -> Settings Or cntrl+,
type "rulers" and click Edit Setings.json
3. Add the size value by ',' As you wish
"workbench.colorCustomizations": {
"editorRuler.foreground": "#0ddf73"
},
Like this(Gif)