I can't find anywhere in VSCode theming docs how to change the colors of the minimap (background, highlight,...), can someone please help me with this?
Thanks.
Starting in VS Code 1.43.0, you can change the minimap opacity and background color with the following setting in settings.json:
"workbench.colorCustomizations": {
"minimap.background" : "#00002299"
}
I reached this by going to File | Preferences | Settings, typing "workbench.colorCustomizations" in the search box, and clicking "Edit in settings.json".
These are hexadecimal numbers and the order of the color channels is RGBA, so this example gives a very dark blue background and (full-size) characters from the editor can be seen behind the minimap.
this works for me:
"workbench.colorCustomizations": {
"scrollbarSlider.activeBackground": "#62fa1b",
"scrollbarSlider.hoverBackground": "#fa2a1b",
"scrollbarSlider.background": "#c97554",
},
credit
Here's how I sync up my customized minimapSlider and scrollbarSlider.
"workbench.colorCustomizations": {
"scrollbarSlider.background": "#0000001a",
"minimapSlider.background": "#0000001a",
"scrollbarSlider.hoverBackground": "#00000028",
"minimapSlider.hoverBackground": "#00000028",
"scrollbarSlider.activeBackground": "#00000028",
"minimapSlider.activeBackground": "#00000028",
},
I fought this one for a while, turns out it's "editor.background" but you have to restart vscode for it to take effect.
To always show the minimap slider (without having to mouseover) go to
File| Preferences| Settings and search (type in): "minimap show slider".
Change the default "mouseover", to "always".
I think those settings can be overwritten. Go to your VSCode settings and under the workbench.colorCustomizations settings, the ones you're interested in are those starting with scrollbarSlider.*.
Check https://code.visualstudio.com/docs/getstarted/themes for more infos.
Hope it helps
Related
I'm coding with SQL in Visual Studio Code. I'm using the default font, Dark(Visual Studio). When my text is not highlighted/selected, it shows with a strange background color that shouldn't be there by default. What is the user setting to override this?
This was a feature introduced to SQLTools v0.22.2 to indicate what code would be executed by Run current query:
https://github.com/mtxr/vscode-sqltools/issues/592
One proposed fix is to add this to your settings:
"workbench.colorCustomizations": {
"sqltools.currentQueryBg": "#ff0000",
"sqltools.currentQueryOutline": "#ff0000"
}
You will need to change the above colors accordingly. It's far from ideal, since you'll need to tweak the settings every time you change themes in VS Code.
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 searched that VSCode have built-in ColorPicker from this Link
But i'm trying to learn code igniter with vscode and there's nothing like that. How to enable it ? i tried to enable editor.colorDecorators:true but its doesn't change anything.
When I had that same problem it was because I had "editor.hover.enabled": false, in my VS Code settings and setting it to true got the color picker working.
Go to settings, the small cog in the bottom left of the screen.
Type in 'hover' into the settings search bar and make sure 'Editor>Hover:Enabled' is checked
Now when you hover a color, the color picker should appear
If you are not seeing the color box, check CSS is selected as the language in the bottom right, if it is not, click on it and select CSS.
try:
body {
background-color: rgb(255,255,255)
}
then hover over 'rgb'
edit:
I've just noticed it also works for #fff, but you need to lose the quotes
Note there is an issue which can explain the lack of color picker, for large files (typically more than 500 lines).
#139743: "Built-in color picker stops working on large css files".
This is fixed by commit c0aa5bb and available in VSCode Insiders today, to be released with VSCode 1.75 (Jan. 2023).
I had this issue the language mode is selected to postcss and not css. When I set to css the color picker boxes appeared again.
CSS-in-JS is popular nowadays, use vscode-color-picker to bring the color picker to files other than css/sass/less (the built-in color picker supports styling files only, for now)
After installation, add the languages list to the settings because the extension does not turn on the feature by default.
on Mac: press Command + Shift + P then choose Open User Settings (JSON)
Then add these settings:
"vscode-color-picker.languages": [
"php",
"html",
"css",
"rust",
"python",
"json",
"jsonc",
"yaml",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"vue-html"
]
As I tested:
It does not work with .tsx file (although it is in the list of the supported languages)
Works well with .js and .ts.
You don't need to do any settings, just remove the double quotes from the color (from "#fff" to #fff).
If that doesn't work out then use these extension, I prefer it to the VS Code picker:
I'm struggling on how to enable the bold text in the integrated terminal that is pre-installed in Visual Studio Code.
So far I've tried enabling in the settings.json using these parameters:
"terminal.integrated.enableBold": true , but had no luck.
Any idea on how to accomplish this?
Or if there is a more customizable terminal that you happen to know of, I'll be glad to try it out.
Add these to settings.json:
"terminal.integrated.fontWeight": "normal",
"terminal.integrated.fontWeightBold": "bold",
Note: these need to be at the "top level" of settings.json. Do not nest them under "workbench.colorCustomizations": where you set the terminal colors such as "terminal.background"
Supposedly, you could also set a value from 1 to 1000, but that didn't work for me when I tried 1000 or "1000" on VS Code 1.62.1 (Oct 2021).
I'm using vscode_x64 v1.15.1, and somehow it enabled bold font by default
As I tried switching between bold or not, it just works fine
This works..!
"terminal.integrated.fontWeightBold": "100"
Just increase the number for Boldness ;)
All the VS Code default themes (and any others that I've seen) have a uniform background color between the main view and the gutter. This makes it really hard to tell if you're at the start of a line (or to click there). Is the cursor at the start of the line here?
This is especially annoying with Python where indentation matters and you can't simply auto-indent a block once your indentation is messed up.
I often find myself pasting a block only to find that I was one space away from the start of the line and the pasted block therefore being offset.
Simply setting the gutter to a light grey background would fix this problem but looking at the default theme files I can't see any settings for the gutter. I've also looked at a theme from the store (Material) which has a few keys relating to gutter colours but changing them did not do anything.
Is there any way to modify the gutter background colour in VS Code?
Update: Version 1.8 of VS Code comes with a new setting to render the line highlight which can help with this when set to 'gutter':
You can change the gutter's background color (or colour) in settings.json. This was added in May.
"workbench.colorCustomizations": {
"editorGutter.background": "#000000" // your color here
}
or you can add
"editor.rulers": [ 0 ]
This won't change the background but it will add a line between the gutter and the editor.
The problems is that the gutter pointers are just not enabled by default.
Open preferences, workspace settings and set
{
"editor.renderIndentGuides": true,
"editor.renderWhitespace": "all"
}
You should see the guidelines and whitespace, hope it helps.
For more settings like this check -> https://code.visualstudio.com/Docs/customization/userandworkspace
Please install 'Python For VSCode' extension to solve the indentation issue.