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.
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
I would like to achieve something similar to the coloring of modified files by VS Code.
I want to pick files manually and color them. Is it possible in VS Code or some extension?
My goal was to access manually picked files quickly; I used the File Focus extension.
When I modify files on local machine, vscode will shows changes with different colors, blue means this line was changed and green means its a new line, like this picture:
but when I modify files with Remote-SSH, it would not works, so how can I check my settings to make this works?
If the remote directory is symlinked sometimes does not work (see here and here). Changing the symlink with source directory resolves the problem and the gutters appear again.
A work-around is to install GitLens extension and enable Gutter Changes view. It is a functional replacement for built-in gutter indicators.
for example .xlp is my file type and name is code.xlp I want to highlight some code.
or some colors ?
Somethings like this
Inno Setup For VS code
In case you don't want to write custom extension, try manual configuration of 'file association' for '.xlp' files.
This will tell VS Code to highlight content of '.xlp' files as language of your choice.
For example, I set it to C# and it looks like this:
Steps for this configuration:
Inside of '.xlp' file press ctrl + P to open navigation field,
Search for >Change Language Mode,
Choose Configure File Association for '.xlp',
From dropdown list choose language you like.
As mentioned inside a comment you must write an extension for VS-Code to have your custom syntax highlighting for those files.
There is a good documentation available at:
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
At the mentioned web page you will find also more information about how to write your own extension and how to deploy it etc.
I just install the latest version of the VS Code on my Win 10 x64, before that I install Python as well, but nothing else.
When I open the VS Code, it seems my Settings.json is empty (just my theme and zoom level are there).
I opened the Settings.json from settings with clicking on the icon that you can see in the bellow image (noted with a red circle in the top right side) or with searching the JSON keyword in the setting (result is the same)
But in this file I just have two lines of code which you can see in the below image:
But I think it has to bee a big file with lots of settings and so on, even I check this file in this path: %APPDATA%\Code\User\settings.json and it was empty and just have this two lines of code.
I install the python extension, Dracula theme and so on in my VS Code.
.
Can you help in these questions:
Do you know what is the problem?
How I can restore the default value of the setting? (in case they are missed)
I want to change the color of the comments in the python language because in this theme it is not easy for me to read them in files, I found I can change it from the Settings.json but mine is empty,
settings.json only contains those settings which override the default behaviors.
In order to restore the default settings (from .json) you have to delete the line. (You can also do it from the GUI)
I think the setting "workbench.colorCustomizations" is what you are searching for; try to Google it.