How can I create my own theme for vs code?
change color & syntax colors?
Once you have tweaked your theme colors using
workbench.colorCustomizations and editor.tokenColorCustomizations,
it's time to create the actual theme.
Generate a theme file using the Developer: Generate Color Theme from Current Settings command from the Command Palette
Use VS Code's Yeoman extension generator to generate a new theme extension:
bash npm install -g yo generator-code yo code
If you customized a theme as described above, select 'Start fresh'.
Copy the theme file generated from your settings to the new extension.
You can also use an existing TextMate theme by telling the extension
generator to import a TextMate theme file (.tmTheme) and package it
for use in VS Code. Alternatively, if you have already downloaded the
theme, replace the tokenColors section with a link to the .tmTheme
file to use.
{
"type": "dark",
"colors": {
"editor.background": "#1e1e1e",
"editor.foreground": "#d4d4d4",
"editorIndentGuide.background": "#404040",
"editorRuler.foreground": "#333333",
"activityBarBadge.background": "#007acc",
"sideBarTitle.foreground": "#bbbbbb"
},
"tokenColors": "./Diner.tmTheme"
}
Tip: Give your color definition file the -color-theme.json suffix and you will get hovers, code completion, color decorators, and
color pickers when editing.
Source: Create a new Color Theme
settings.json allows to define the background color for all files:
"workbench.colorCustomizations": {
"editor.background": "#F0F8FF" }
Is it possible to set different background colors, for example, for files with extensions html, php and js ?
With the extension When File you can change that theme color based on languageID or file location.
The built-in features of VSCode do not allow you to customize the background color depending on the file type.
There is an extension Theme by language. It allows you to customize the theme of VSCode depending on the programming language.
I m looking for a way to setup a specific color theme (or alter the default color theme)
based on the type of file edited by vs code
OR
depending on the used extension
I've read HOW TO setup a color theme and alter the default color theming but I could not find HOW TO setup a specific rendering based on file type. It seems the theme apply to the whole application. More specifically what I m interested in is to use say the "Light" color theme rendering while editing drawio file (graphical file edited using a dedicated extension) and use the "Dark" theme rendering for code editing (any other file type).
The extension I use refer to appropriate color theme and finally what might a good option would be to set a given color theme based on the extention involved to edit the file but that might require to dig into the extension source code.
The February 2021 version brought a breaking change for the colors of autocomplete lists:
https://code.visualstudio.com/updates/v1_54#_updated-listtree-ui
Where we have the following settings for the colors of the focused item:
quickInputList.focusIconForeground
quickInputList.focusForeground
quickInputList.focusBackground
The three work fine.
However, when setting focusIconForeground, it seems that we can override the color of the icon... but what if I want to keep the original color of the icon, even when the item is focused?
For example, suppose I have the following settings:
"workbench.colorCustomizations": {
"[Default Light+]": {
"quickInputList.focusIconForeground": "#ff0000",
"quickInputList.focusForeground": "#000000",
"quickInputList.focusBackground": "#e0e0e0",
},
},
If so, this is the rendered autocomplete list:
See how the icon of the focused item is red. I want it to remain purple, its original color.
So, what setting can I use in quickInputList.focusIconForeground to keep the icon at its original color?
As a side note... I'm using "Default Light+" theme, but I noticed that many other themes (like "Quiet Light" and "Monokai") do exactly what I'm trying to do.
I had to dig into the actual source code of VSCode in order to find this. What happen is: the suggestion box icon is called product icon, which is actually a glyph icon font that can be themed. It ships with no color, because the color is defined by the active color theme.
When the suggestion box is rendered, VSCode checks if current theme has defined a color to the icon. If there is no color, a default color is given according to the icon type. However, if the color theme defined a color to the icon, this color is used, regardless of the icon type – that is, the theme overrides the color. The parameter for this color is editorSuggestWidget.selectedIconForeground, as noted in JayDev's answer. The code which does this can be seen here.
Now the theme I'm using, "Default Light+", does override this color, and there is no way to clear this overriding in VSCode settings file. Other themes do not override, and those themes show the original icon color, which is the behavior I want. So, what I had to do was simply modify the theme, inside VSCode installation folder, commenting out the offending line, which can be found here. For reference, in VSCode installation folder, it's line 28 of this file:
resources\app\extensions\theme-defaults\themes\light_vs.json
The line itself to be commented out is:
"list.activeSelectionIconForeground": "#FFF"
Another solution would simply be to create another theme, based off "Default Light+", with this fix. However, if the theme is updated in the future, I'd have to keep the pace, something I don't want to do. So, what I'm doing is adding this fix to this patch I wrote a while ago to automate other VSCode customizations.
Note: All source code references were taken off VSCode commit da77887 (June 10, 2021). These references may, obviously, change in the future.
I want Visual Studio Code to use my .tmTheme file. The only instructions I can find for directly changing the color scheme involves creating a custom theme. I don't want to create an entirely new theme, I only want to change the color scheme.
How do I change only the color scheme?