Remove the vertical indicator line from Activity Bar in VS code - visual-studio-code

How can I remove the vertical indicator line from Activity Bar in VS code's new release?
How can the vertical line of the indicator be removed from the side of the activity bar in vs code, so it does not exist like in the previous version? I prefer the earlier version so the activity bar indicator does not exist.

Currently it is not possible to deactivate it. You could try to override the activityBar.activeBorder setting of your color theme. To do so, open your settings (Ctrl+Shift+P -> Preferences) and add a new entry:
"workbench.colorCustomizations": {
"activityBar.activeBorder": "#000000"
}
Instead of #000000 use e.g. the the value of activityBar.background of your current theme.
To see what you current theme is look for workbench.colorTheme in your settings.

Related

Vs Code tabbar design (Default drop shadow)

I was trying to customize my vs code theme but did not get any option to disable the drop shadow of the tab bar of the VS Code.
There is some option to modify the tab bar using the "editor
not get "editorGroupHeader.tabbar" but I am not able to find any option to disable the drop shadow.
tabbar drop shadow
Though I have figured it out and am happy to share it here...
"scrollbar.shadow": "#HEX",
You can use this property to change the shadow and background color.

How do I change color of Scrollbar in Visual Studio Code?

The question is - how do I change color of scrollbar in VSCode?
I want to change my scrollbar to the color of my VSCode background. Available scrollbar settings in workbench.colorCustomizations don't change it the way I want (all I could find is scrollBarSlider and scrollbar.shadow settings), and I know there's a way to change it cause it is different in other themes (it's the same color as the background in those themes, as it should be)
How my scrollbar looks right now
(Added an arrow juuuuuust incase)
Thanks a lot!
In your settings.json:
"workbench.colorCustomizations": {
"editorOverviewRuler.background": "#ff0000", // for the "track" where the scrollThumb lives
"scrollbarSlider.background": "#9aa", // for the scrollThumb color
}
For others, see theme color reference: scrollbars and editorOverViewRuler in the same link.
Do note that there are other indicators that also live in the editorOverviewRuler, like selection indicators, find match indicators and more, which have to play nice with the color as well.

VSCode - Change Menu Transition Property

I am using "Solarized Dark" theme. It is flashing light when changing menu. You can get the idea by the screenshot. It is more flashy & frequent than seen on the screenshot (intensity could not be captured properly).
Is there any menu transition property where I can set something soothing color other than that flashy white?
Go to your user settings first
Then search for window.titlebar and find Window: Title Bar Style and check whether is it is set to native or custom. Try changing it to custom if it is set to native and see if that works!
Don't forget to restart the vscode!

Change background and font in "Problems" panel in vscode

I have the most recent copy of VSCode.
I'd like to change the background color and font on the "Problems" panel in the terminal window.
I have used theJSON settings to set up the background on the terminal window itself but can't seem to find a setup for the problems panel.
Thanks for looking.
Look at the panel properties to change the Problems panel.
"workbench.colorCustomizations": {
"panel.background": "#0b698f",
"panel.border": "#ff510060"
}
But it will change the background for all the panel items, like Terminal, Problems, Debug Console, etc.
You can override that setting for the Terminal only:
"terminal.background": "#ff0000",
It would appear that the Problems panel fontFamily cannot be independently set as I see only these two panel fontFamily properties:
"terminal.integrated.fontFamily"
"debug.console.fontFamily"
You might be able to figure out how to do it with the Custom CSS and JS extension. See, for example, How to change the font in VS Code's 'Explorer' window?
Maybe it is <div class="composite panel markers-panel"

How to hide dashes on right sidebar in VS Code?

I want to get rid off these dashes on right scrollbar of the editor
It's like minimap to indicate the current highlightings in editor.
Update:
I think this feature is Bar mode But still I don't know how to change it.
I'm using VS Code for OSX
As you pointed out, VS scroll bar has 2 modes: Bar mode and Map mode.
To turn off annotations (in Bar mode):
In VS, go to: Tools -> Options -> Text Editor -> All Languages -> Scroll Bars
Uncheck: Show annotations over vertical scroll bar
Go to Code > Preferences > Settings to open user settings and add following line "editor.selectionHighlight": false, and it will stop highlighting selection.
You can customize the colors used in the overview ruler in your VS Code settings.json file. Use a transparent color such as "#fff0" to hide the annotations. The list of annotations is in the VS Code docs here (search for overview ruler).
For example, to turn off selection highlighting, bracket matching, and modifications in the scrollbar, add this to your settings.json file:
"workbench.colorCustomizations": {
"editorOverviewRuler.wordHighlightForeground": "#fff0",
"editorOverviewRuler.bracketMatchForeground": "#fff0",
"editorOverviewRuler.addedForeground": "#fff0",
"editorOverviewRuler.deletedForeground": "#fff0",
"editorOverviewRuler.modifiedForeground": "#fff0",
},