i have installed a new icon theme for vscode called vscode-icnos, and i am trying to
set the todo icon if a file is [todo, TODO, *.todo, *.TODO],
i have done this for the *.todo and *.TODO, but cannot fin a way to set it on the filename, not the extension, any help
this works in the normal vscode icon seti, but not in my custom
any help
https://medium.com/#chih.hsi.chen/how-to-add-your-custom-icons-to-vscode-icons-9ab8c3f9abc1
Here is shown how to do it step-by-step
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
Hey recently I just familiar with this extension but don't know it's name in vs code.
So in the picture given below check that there is a blue vertical line in the left of the selected code. Which extension is this
That is not theme specific -- It is a VSCode indicator of lines added to a file before it has been saved.
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've recently moved to VS Code from Sublime Text 3, and I'm wondering whether - as of the time of asking this question - there's a way to use the .tmTheme file I was using for syntax highlighting in Sublime Text.
I understand that this will involve creating a custom theme as VS Code doesn't inherently separate UI styling from syntax highlighting like Sublime and Atom do, but does VS Code at least provide any way to automate the process of combining the UI (which I think is known as the workbench in VS Code) of one theme while using the editor colours from a .tmTheme file?
Is the only way to do this at the time of writing really to set each of my syntax colours individually with editor.tokenColorCustomizations?
Combining a VS Code color theme's UI styles with syntax highlighting from an existing .tmTheme file
Unfortunately, as of the time of writing this, there's no easy way to accomplish this. After failing several times to accomplish it using VS Code's Yeoman theme generator tool alone, I finally managed to get it working by following the instructions here and then doing some additional manual work, although I found that this first method was for some reason prone to reverting back. I then figured out a second, more persistent method, and so far this hasn't reverted back.
Method 1 (prone to reverting back)
Open the VS Code terminal (Ctrl'), and run the following commands to install and run the Yeoman theme generator tool:
npm install -g yo generator-code
cd %USERPROFILE%\Desktop
yo code
Select New color theme, Start fresh, then follow the prompts to give your theme names and an ID (hit Enter to leave the description blank). Yeoman will then create a theme folder for your new theme on your desktop.
Assuming that the theme whose UI styling you want to use as a base is already installed as a VS Code extension, navigate to %USERPROFILE%\.vscode\extensions, click into the base theme's folder, and locate its -color-theme.json file (usually inside of a themes folder). Copy this file to the themes folder of your newly-created theme, making sure to delete the existing -color-theme.json in that folder.
Open the newly-copied -color-theme.json file and look for the line beginning with "tokenColors":. Delete everything after it inside of and including the square brackets:
...and replace with the name of the .tmTheme file containing your syntax highlighting styles:
"tokenColors": "syntax-highlighting.tmTheme"
Finally, copy your syntax highlighting file to the themes folder, and then copy the entire theme folder to %USERPROFILE%\.vscode\extensions.
Restart VS Code, and change the active theme (CtrlK,CtrlT) to your new theme.
Method 2 (persistent)
Open the VS Code terminal (Ctrl'), and run the following commands to install and run the Yeoman theme generator tool:
npm install -g yo generator-code
cd %USERPROFILE%\Desktop
yo code
Select New color theme, Import and inline an existing theme, and then enter the path to the .tmTheme file whose syntax highlighting styles you want to use. Note that this must be an absolute path without quotes:
Follow the prompts to give the theme names and an ID (press Enter to leave the description blank), and Yeoman will then create a theme folder for the new theme on your desktop.
Assuming that the theme whose UI styling you want to use as a base is already installed as a VS Code extension, navigate to %USERPROFILE%\.vscode\extensions, click into the base theme's folder, and locate its file (usually inside of a themes folder).
Copy all the styles inside of this file's colors object:
...and paste them into the colors object of the -color-theme.json file in the theme folder created by Yeoman, making sure to remove any that exist.
Finally, copy the entire theme folder to %USERPROFILE%\.vscode\extensions.
Restart VS Code, and change the active theme (CtrlK,CtrlT) to your new theme. If you followed this process correctly, you should now have a VS Code color theme that uses the UI styling of your chosen base theme and the syntax highlighting styles of your chosen .tmTheme file, and doesn't revert back without warning.
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