I'd like all the outline view/window icons (clarification: not the file icons, the stuff under "outline") to be colorless in vscode, but I can't find any themes with different and/or colorless outline icons. Is it possible to go into the vscode settings and change the icon files manually? Ie. change json settings, run a script on the file(s) to change all color codes to white or something like that?
Edit: re answer below file-icons colorless does not replace the outline icons :(
I see from the comments of your question you were able to find a solution. For others' reference:
You need to update settings.json to include the color updates you want to make for the variables listed here: https://code.visualstudio.com/api/references/theme-color#symbol-icons-colors under the workbench.colorCustomizations object.
e.g.,
// settings.json
"workbench.colorCustomizations": {
"symbolIcon.variableForeground": "#a8a8a8",
"symbolIcon.arrayForeground": "#a8a8a8",
"symbolIcon.booleanForeground": "#a8a8a8",
"symbolIcon.classForeground": "#a8a8a8",
"symbolIcon.colorForeground": "#a8a8a8",
"symbolIcon.constantForeground": "#a8a8a8"
...
...
},
If you do not have a colorless icon set that you want to use:
Use the file-icons VSCode extension and select File Icons (Colourless).
If you do have colorless icons that you want to use, you can use your own icon files with the vscode-icons VSCode extension.
From the vscode-icons wiki:
Create a folder called vsicons-custom-icons
Place the folder in one of the following locations (depending on your OS):
Windows: C:\Users\<your_user>\AppData\Roaming\<Code Folder>\User\vsicons-custom-icons
Linux: /home/<your_user>/.config/<Code Folder>/User/vsicons-custom-icons
Mac: /Users/<your_user>/Library/Application Support/<Code Folder>/User/vsicons-custom-icons
Related
Is there a way to highlight the tree path in the file I'm currently editing like Git does when I have uncommitted changes in a file? When I'm editing a file it only highlights the file, like this: Only file, I would like to highlight like this: Git example
Hi are you asking about this highlight ? I'm not sure either how to change the settings in VSCode but im currently using the Dark+ (default dark) theme in VSCode, i guess you can try change the theme in VSCode, hope it works ![]
sample
How do I change the activity bar icons in Visual Studio Code? I kept googling but couldn't find anything, and have seen people do it, here for example.
Also, can I make VSC's background transparent?
To change the color of the badge, you need to add this to your settings.json file:File > Preferences > Settings > Open json file
"workbench.colorCustomizations": {
"activityBarBadge.background": "#0F99D677",
"activityBarBadge.foreground": "#EEE"
},
In your example, looks it is a theme with a CSS gradient or a picture as background. It seems this cannot be achieved with a setting, you probably need an extension for this.
Same to make VS Code transparent; you could use this one:
https://marketplace.visualstudio.com/items?itemName=s-nlf-fh.glassit
How can I configure the Material Icon Theme to use default icons for some folders in VS Code?
E.g. I have a folder named trigger and that folder has an unusual icon. I would like to have a default icon for the trigger folder, just as it is for the sibling shoot folder.
I read through the features of the Material Icon Theme inside the VS Code documentation, but was not able to find a way to achieve what I want.
I mean this extension.
Also, I was able to disable all speicific icons styling by using the Material Icons: Change Folder Theme command. But I want to disable only for a specific folder, or at least for a specific folder name (trigger in my case).
Just declare in your settings.json file:
"material-icon-theme.folders.associations": {
"trigger": ""
},
In the settings of the extension there's a option to set the icons of the folders. By default it's set on "specific", you need to set it on "classic".
Screenshot
I'm using Monokai Pro as my color scheme in VS Code. When VS Code greys out the names of the folders that are found in the .gitignore file, the text color becomes incredibly difficult to read.
For example, I had the /node_modules folder (circled in red) written inside my .gitignore file and VS Code would grey out the node_modules text in the Explorer.
When I expand the folder, all the sub-folders' names are greyed out but the text is very difficult to read.
I would like to edit the color of the greyed out file names inside the VS Code JSON settings. I'm aware that I can make customizations to a color scheme as found in the documentation here. However, I'm not sure which JSON property targets the greyed out file names inside Explorer.
"workbench.colorCustomizations": {
"[Monokai Pro]": {
// What should I write here?
}
}
It looks like this is the one:
"gitDecoration.ignoredResourceForeground": "#ff0000"
so
"workbench.colorCustomizations": {
"[Monokai Pro]": {
"gitDecoration.ignoredResourceForeground": "#ff0000"
}
}
I've created a language extension (syntax highlighting, etc) and now want to associated a specific icon with the language (or files with the extensions specified in my extension).
I noticed an "icon" property is available in the package.json file, and tried to bind this property to my .svg file. But while syntax highlighting works just fine on a test file, I don't see my custom icon associated with this file.
Where do I add a reference to my .svg file? Do I have to somehow contribute my .svg file to the Seti File Icon Theme?
In vscode v1.64:
Language default icons
Language contributors can define an icon for the language.
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]
The icon is shown if the current file icon theme only has a generic file icon for the language.
File icon themes like Minimal or None that do not show file icons also
will not use the language icon. Also, if a file icon theme has an icon
for an extension or file name, these will be preferred.
File icon themes can customize the new behavior by defining
showLanguageModeIcons: true|false in the theme file.
showLanguageModeIcons: true shows the default language icons even if
the theme does not specify a file icon
showLanguageModeIcons: false prevents that default language icons are used.
https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#language-default-icons
File and folder icons are defined in icon sets, the default set being Seti. There is indeed currently no way to re-define those icons in an extension, short of creating your own icon theme. The Seti UI icons are generated from a dependency to the main repo and shipped as a built-in extension.
Therefore, your best bet to get your syntax icon included in VScode is submitting a pull request to the Seti UI repository. At some point, the new icons will be rolled into an icon font by the VScode developers and your icons should appear.
!!
UPDATED: see other comments to proper answer
There is newer version of vscode. So no need for this 'hack' anymore.
!!
Unfortunately you have to specify whole theme icon specification in current version of vscode.
There is PR on github that should allow extend default icons: Support extending icon themes
Before it will be merged and included into new version there is possibility to copy default seti configuration
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/seti.woff
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/vs-seti-icon-theme.json
and add your own icon into vs-seti-icon-theme.json config according doc File Icon Theme