[themes] different themes for different filetypes

[darekzak]

Is it possible to have different themes for different filetypes?

[LucaRosaldi]

Same thing here. I use dark color scheme for CSS and JS, light for everything else.

[Code4SAFrankie]

            {
                "scope": "text.html.basic keyword",
                "settings": {"foreground": "#4a83f6"}
            },

is not working for me, the keywords stay green.

[aeschli]

@Code4SAFrankie Use the Inspect Editor Tokens and Scopes tool to see what the scope is at a certain location. I don't think the HTML grammar uses keyword. Also, it can be, that a more specific rule wins against our rule. The Inspect Editor Tokens and Scopes tool tells you what theme rule has won.

[stuardcg]

I like the approach of Windows Terminal, each profile have their own settings like schema and fonts.

[ncoughlin]

There is now a plugin for this:

https://marketplace.visualstudio.com/items?itemName=jsaulou.theme-by-language

[bugpowder]

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

Split the UI theming from the editor (syntax/code) theming. If two editors are open, use the same "UI theme" but the appropriate per language syntax theme.

[RajvirSingh1313]

I think this issue is solved as @jsaulou created a great extension. I think @aeschli you should close this issue as there is an extension for that.

[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",
}

[Triangle4]

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