[themes] different themes for different filetypes

[darekzak]

Is it possible to have different themes for different filetypes?

[aeschli]

@darekzak Please explain more... Is it about file icon themes or color themes?

[darekzak]

I should gave more details, sry. I meant color theme.

[aeschli]

Sorry, can you explain more? Still not clear how file types should correlate with color themes?
Something like:

{
    "*.java": "Monokai"
}

[darekzak]

Yes, exactly like that.

{
  "*.js": "Monokai",
  "*.html": "Flatland Monokai"
}

[aeschli]

Ahh. But themes already theme more than just the editor. What would we do if two editors are open?

[wopian]

For me, this would remove the manual action of constantly changing colour theme when working on a specific set of languages (mainly AGC) in chrislgarry/Apollo-11 or virtualagc/virtualagc, then switching back to my dark theme when working on anything else.

As due to the archived printouts being printed with black text on white, its far easier to compare the transcribed code in VS Code with the images and spot typos when they're a similar colour - instead of contrasting.

Example:

[tshu-w]

I have the same requirement like the questioner.
Different themes for different languages in Visual Studio Code

[clembu]

What would we do if two editors are open?

My thoughts go to a differentiation between themes specified for a language and "the theme of the workspace".
If two editors are open, they apply whatever theme matches the language found. The rest of the UI uses only the "main theme".
Agreed, it would slow down editor loading time a tad more.

A second option is to go the atom way and separate UI themes from Syntax themes, but I'm not much more convinced by this.

[gordonbondon]

One more reason to implement this is having different themes for code and documentation:
light theme for *.md files
dark for everything else

[pcunite]

Theming per file type (file extension, etc.) is highly desirable. Notepad++, Sublime Text have it, vsCode should have this too. I have a sample tmTheme file I use for Sublime Text if anyone is interested in making it work with vsCode.

[Danilux]

+1 for this, my current use case is to have a specific theme when opening markdown files, for the rest of lenguages I must admit I use the same theme

[darkpoetcc]

I have to agree with the requestor -- I am used to editing languages more in specific color schemes from my previous IDEs (STS [Eclipse-based]) vs Atom & Brackets vs Visual Studio vs various Json/XML editors/parsers. This would be very useful, IMO.

[Place1]

I'm keen for this as well. Ideally I could override any setting when i'm editing a specific language. I like to totally change up my config when editing LaTex files, i.e. Serif font, larger font size, light color theme, different 'files.exclude' different settings for some other extensions i've got and more. Supporing more than just the 'editor.*' settings would be great :D

[jay-hankins]

As others have said, this is an extremely versatile feature that is hard to articulate how useful it is. It is something I sorely miss from Sublime Text.

[Enteleform]

I wrote a Conditional Color Scheme plugin for Sublime Text, and am currently considering making VS Code my primary editor.  I'm still working through the default settings & keymap to see what's available, so I haven't had a chance to check out the API yet.

Does VS Code have something similar to Sublime Text's

view.settings().set("color_scheme", "__new_color_scheme_name__")

?

[vinnytroia]

+1
At the very least have the ability to create specific theme files per language. I believe this is how Atom handles themes. There is a separate json file per each language.
php.json
html.json
etc

[aeschli]

@Enteleform Yes, extensions can change the current theme through the settings.

[Enteleform]

@aeschli
I know it can be done globally, which includes the GUI components.
Is it possible to affect only the document view of a single file?

[aeschli]

Our token theming engine currently only supports one theme a time. The code would have to be refactored.

[anwar3606]

@aeschli Than how would I change the theme with extension? any direction?

[igonro]

This issue shouldn't be closed because the @jsaulou extension does not solve the original problem. Some filetypes as .ipynb and .py use the same language (Python), so it is not possible to assign different themes for .py and .ipynb files.

[RajvirSingh1313]

This issue shouldn't be closed because the @jsaulou extension does not solve the original problem. Some filetypes as .ipynb and .py use the same language (Python), so it is not possible to assign different themes for .py and .ipynb files.

I think you are right, but does that really matters at the end when coding? I am using jsaulou's extension and I only notice it sometimes as a programmer

[ZYinMD]

For anybody who's still following this issue: I now use different fontFamily / fontSize / lineHeight for different langauges. It's good enough for me, and the switch is much faster than switching the theme.

You could try adding something like this to your settings.json and see how to works:

  "[plaintext]": {
    "editor.fontFamily": "sans-serif",
    "editor.fontSize": 22.3,
    "editor.lineHeight": 34,
  },
  "[markdown]": {
    "editor.fontFamily": "serif",
    "editor.fontSize": 19,
    "editor.lineHeight": 25
  },

[jsaulou]

I could add the possibility to associate a theme using either extension or language.
Themes defined by extension would probably have the higher priority as they are more specific.

Would this help?

[igonro]

I could add the possibility to associate a theme using either extension or language.
Themes defined by extension would probably have the higher priority as they are more specific.

Would this help?

Yes, that would be awesome!

[NatalieGates]

I would like to create a theme for files ending in .ledger

I have a nice theme I use for .md files that I would like to also use for .ledger files.

Is this possible?

[Gabriel-p]

I'm sorry but the extension Theme by language is absolutely not a fix for this issue as it changes the theme of the entire editor. For those of us who use several panels (I'm guessing most) this is slow and bad

[janosh]

A similar feature (which likely doesn't deserve its own issue considering that #28483 was closed with reference to here but which should be kept in mind when this is implemented) is the ability to set a different color theme for the markdown preview window. For example have the .md file dark themed on the left and its preview light themed on the right (to look more like a normal document). Useful e.g. to properly view plots with transparent background:

[moseleyi]

I would also like such feature. For 75% of my files I have an Egoist One theme slightly tweaked using settings. But for specific file type (*.lookml) I want to install an extension that has tokens colours. However we have to specify a theme in the extension, which means it changes my whole editor.

[evdcush]

darekzak commented on Feb 15, 2017

This feature request was initially opened in Feb 2017, with lots of closed duplicate issues and references from other issues, and consistent comments and demand until today here.

What's the status on this feature request?

Is this feature on the vsc roadmap?

This inability to select per-syntax/filetype themes is one of major remaining shortcomings in vscode that keeps my development workflow split between different editors.

Some themes just have better syntax support for certain languages over others, and some languages just look better in other themes.

It would be ideal if vscode could have "syntax-specific" settings like Sublime Text does.

For example, I have a different "color_scheme" defined on each syntax here (markdown: bijan, java: hotdogstand, python: monokai):

You too can get that java theme simply by specifying in your java.sublime-settings:

// These settings override both User and Default settings for the Java syntax
{
    "color_scheme": "Packages/Colorsublime - Themes/HotDogStand.tmTheme",
}

[andrewdavidjamesburke]

I think time is up on this one Microsoft :) This is a relatively easy implement 5 years in the request queue.

What we need is something like this:

{
    "label": "Some Dark Theme",
    "uiTheme": "vs-dark",
    "path": 
    [
        "./themes/dark.editortheme.json",
        "./themes/dark.cs.json",
        "./themes/dark.js.json",
        "./themes/dark.html.json",
    ]
},

This is a somewhat necessary feature.
For both the OP's reason and for general organization when using the same editor theme with multiple syntax themes for various languages.

[ionut-botizan]

I'm a bit surprised that in 7 years, nobody mentioned the situation in which the per language theme would probably make the greatest difference and that is embedded languages.
The most common example in the past few years would be the CSS in JS syntax highlight, in which a different theme for the CSS code written as

export const button = css`
    border-radius: 4px;
    font-size: 14px;
`

would make it easier to differentiate between the two.

One example from a project I currently work on are Neo4J Cypher query strings. To make it easier to differentiate the queries from the surrounding code I had to manually apply different colors from the Twilight theme to the Cypher language tokens when the default theme was Monokai, as it has already been suggested in other posts here. However, doing that for multiple languages and keeping the settings in sync with the original theme the tokens were taken from is very cumbersome.

Note in the examples below how in the first screenshot the query has no specific highlight other than the default Monokai color for Typescript strings, then, in the second, highlight is enabled by an extension that tokenizes the string, but it's still pretty hard to follow as the Cypher tokens use the same colors as the Typescript tokens while in the last one the distinction between the two languages is clearly visible as Cypher uses a completely different color scheme than the surrounding Typescript code, which were applied through custom settings, like so

{
	// ...
	"[Monokai]": {
		"textMateRules": [
		{
			"name": "Cypher QL keywords",
			"scope": "keyword.control.clause.cypher",
			"settings": {
				"fontStyle": "bold",
				"foreground": "#82563D"
			}
		},
		{
			"name": "Cypher QL keywords",
			"scope": "source.cypher support.function",
			"settings": {
				"foreground": "#F9EE98"
			}
		},
	]
	// ...
}

1. No highlight:
   

2. Default highlight:
   

3. Custom highlight:
   

[saltsoftdrink]

Hey Guys work on this feature it's very useful & helpful

[chrisbward]

Would like to change the theme or colours for a specific file, to work as an ambient signifier for the particular domain I'm working within - more info on UX design of ambient signifiers here; https://boxesandarrows.com/ambient-signifiers/

[Saltallica]

Holy **** its been years. For the love of all that is holy, please allow different color backgrounds or syntax highlighting per editor window based on language.

[7even7]

I'd also love to have this feature.
Main reason is the above mentioned differences between the themes depending on the language.
I work daily in terraform, yaml, python, markdown, sql and in multiple random languages like go, javascript etc.
I haven't found a single theme to be great for all of the languages. There's always one language that isn't formatted as well as in some other theme. However there's a great theme for any single language mentioned.

[ZYinMD]

I'd also love to have this feature. Main reason is the above mentioned differences between the themes depending on the language. I work daily in terraform, yaml, python, markdown, sql and in multiple random languages like go, javascript etc. I haven't found a single theme to be great for all of the languages. There's always one language that isn't formatted as well as in some other theme. However there's a great theme for any single language mentioned.

If you haven't, at least give each project a different theme using .vscode/settings.json.

[Harr-Fun-Maula]

Actually it would be better if we can set "themes" based on "file name" rather than extension.
Different color for Split window.
for example
"[_Model.js]" : {
tab.background:red,
}
"[_Viewl.js]" : {
tab.background:green,
}

"[*_Controller.js]" : {
tab.background:yellow,
}

[liranc6]

Another year has gone...
I'm starting to think Microsoft is not going to solve it.

I totally agree with @darekzak 's excellent example:
{
".js": "Monokai",
".html": "Flatland Monokai"
}
And @janosh makes a great point about wanting a different color theme for the markdown preview window. A dark theme on the left and a light one on the right would really make it feel more like a normal document.

The Theme War: Microsoft’s Achilles' Heel

[samuel12sam]

I was also trying to do something like @darekzak was mentionning, but stumbled here and realized it's not a built-in feature...im surprised