[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?

[aeschli]

Check out https://code.visualstudio.com/docs/extensionAPI/vscode-api#_a-nameworkspaceconfigurationaspan-classcodeitem-id943workspaceconfigurationspan Use update to manipulate a setting

[halukkaramete]

Not sure, if this belongs here. But, is it possible to define something like this: if the extension is .txt, make the font bigger.

[GarethOates]

Yeah this would be really nice. I'm used to coding in Javascript with the monokai theme, but the Visual studio dark theme for C#. Old habits I guess.

[brandonb927]

@halukkaramete Add this to your settings

"[plaintext]": {
  "editor.fontSize": <num>,
}

[cklouman]

Here is a use case which hasn't been mentioned: when using code to view JS files someone might conceivably be so stupid as to start editing the JS file, and then after 20 minutes compile the changes, and then spend another few seconds trying to find out why the changes did not take. A visual cue for JS files would minify the risk. Asking for a friend ;)

[Snake-Sanders]

"I came here for the same thing, Sublime Text has it. I miss this feature here"

Edited: 8 Months later I came back to this issue and I was shock how rude I was, My apologies. I appreciate the hard work of all of you in this community, vscode brought me happiness and fun at work. Thank you all.

[drbarto]

I have a slightly different take on multi-theming... is it possible to assign themes per window/workspace? (Most likely it's not possible, else someone in this thread would have mentioned it.)

My use case is this: I work on a Web project with a JavaScript backend and a JavaScript frontend, and often have both workspaces (plus a 3rd auxiliary workspace sometimes) open at the same time. I'd love to assign different color schemes to each window so that when task-cycling I could find the correct window more easily. So in my case, a per-language theme setting would not work because it's JavaScript all over the place.

[tsaiDavid]

This would be really helpful - particularly if the rest of the GUI doesn't change. I find certain syntax themes to work well for "everything else", like nord - but when it comes to writing JSX/TSX, I just can't help but fall back to my favorite oceanic-next theme.

[manix]

+1

[liuyxpp]

I want Markdown, LaTeX and other plain text format files being rendered in bright color theme while others in dark color theme. Also the font for text files should not be sans serif...

[klory]

Yeah, I agree, the dark theme for markdown seems to be not clear for Italian and Bold, really want this color theme change according to file extension feature! Or at least the preview of markdown.

[PrinceMarkieD]

Same I use powershell and the posh theme but tomorrow night for all markdown. Can this be implemented?

[good-idea]

My use case is having a different them when I am working on *.mock.* files. These often look very similar to the files they are mocking, and I'd like to be made aware of when I'm working on one or the other. Switching themes for this would be ideal.

[CombeeMike]

Here's my use case:

Highlighting of currently active lines in diff view is only barely noticeable in the theme I'm using. See this question on stack overflow for screenshot etc.

Therefore I'd only like to customize the parameters editor.lineHighlightBorder & maybe editor.lineHighlightBackground for the diffs view.

@brandonb927 mentioned

"[plaintext]": {
  "editor.fontSize": <num>,
}

Is there an equivalent of plaintext for the diffs view or is the diffs view not specified on its own? Also is this feature documented somewhere with all possible domains or types?

[jsaulou]

I've created an extension named "Theme By Language" that lets you change theme based on the current opened file language. This may be interesting for some of you.

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

[GlenPerkins]

The semantics of, say, CSS, Golang, a plain text file, JSON, and Markdown source are so utterly different that it would be a miracle if the highlighting I wanted for each all happened to coincide in the same theme. And even if they somehow did, if I changed my mind about anything ("hmm, I think I'd rather see plain text light instead of dark like code"), I'd be stuck. And even where the semantics are nearly the same and I DO want the same style, I have a theme that highlights Golang function names the way I want but uses a different style for JavaScript functions.

The solution to all of these would be a mechanism for specifying different specialty themes for different file types rather than having only general-purpose-compromise themes. And over time, a smarter theme type might be developed that derived semantic/syntactic categories (for each file type separately) from a combo of language servers, linters, static type info, intellisense, etc. (but that's a different issue.)

[aeschli]

@jsaulou thanks for the great extension.

BTW, if you just want to change editor colors (but not all workspace colors), don't toggle "workbench.colorTheme" but modify the "editor.tokenColorCustomizations" setting. Here's an example to just change the HTML token colors:

   "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "text.html.basic comment",
                "settings": { "fontStyle": "italic", "foreground": "#657Bff" }
            },
            {
                "scope": "text.html.basic string",
                "settings": { "foreground": "#2AA198" }
            },
            {
                "scope": "text.html.basic string.regexp",
                "settings": { "foreground": "#D30102" }
            },
            {
                "scope": "text.html.basic constant.numeric",
                "settings": { "foreground": "#D33682" }
            },
            {
                "scope": "text.html.basic variable",
                "settings": { "foreground": "#268BD2" }
            },
            {
                "scope": "text.html.basic keyword",
                "settings": { "foreground": "#859900" }
            },
            {
                "scope": "text.html.basic storage",
                "settings": { "fontStyle": "bold", "foreground": "#93A1A1" }
            }
        ]
    }

[jsaulou]

Thanks @aeschli.

I don't think this is possible but is there an way to extract these rules from themes? That would be really neat and avoid to change the whole appareance of the workbench.

[aeschli]

@jsaulou As a user, you can invoke the Generate color theme from current settings command and take the tokenColors sections.

[TapioOfTapiola]

I'd also love to:

• have a specific theme for specific file types
• disable breadcrumbs and tabs on plaintext files

Those functions do not work for file types. Maybe a difficult task?

Because: I need all the goodies for coding. But not for text files/ documentation. Also, I'd love to use VS Code as a default association for text files. My config for text files atm:

"[plaintext]": { "files.autoSave": "afterDelay", "editor.minimap.enabled": false, "editor.folding": false, "editor.renderControlCharacters": false, "editor.renderWhitespace": "none", "editor.fontFamily": "Consolas", "editor.fontSize": 26, "editor.wordWrap": "bounded", "editor.lineNumbers": "off", "editor.autoIndent": false, "editor.quickSuggestions": { "other": false, "comments": false, "strings": false }, },

[theSdev]

Is dropping +1s useful? If so here's mine: +1!

[erich5168]

I would suggest change by project instead of change by language. So for example

1. Java Spring Boot file extensions will have .java, .xml, .properties, .sql, .schema, yaml...etc.

2. Angular extension will includes .html, cscc, css, ts, js, json...etc.

3. Flutter....

In my opinion, this could help people who are using VScode for multiple project type.

[MidiCoder]

Any update on this? I like to use the traditional Powershell ISE them when working in PS. But I cant get used to editing .JSON files when it is enabled.

Therefore I would like to them to change to something of my choice when I open or create a json file.

Thanks

[albertobissacco]

Any update on this??

[LucaRosaldi]

+1

[ndac-todoroki]

@jsaulou 's extension is great XD, but since I use several panes at a time, I want to have only that certain individual editor view themed. In this case, when you use the "editor.tokenColorCustomizations" in file-type settings:

"[elixir]": {
    "editor.formatOnSave": true,
    "editor.tabSize": 2,

    // LIKE THIS
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "text.html.basic comment",
                "settings": { "fontStyle": "italic", "foreground": "#657Bff" }
            },
            {
                "scope": "text.html.basic string",
                "settings": { "foreground": "#2AA198" }
            },
            ...
            // maybe backgrounds too?
        ]
    }
},

If you could put that setting inside the language specific ones OF the workspace settings, it should be great! Then the extension could be capable of dynamically setting this, I think?

[aamarks]

I think most of the use cases are covered already by individual token settings and workspace settings that already work. Pretty reasonable to just set the theme for the workspace you use for C+ files differently from the workspace for JS projects.

It would be more obvious you can do that if the menu for file : prefences : color theme just opened the settings editor to workbench:color theme where most know you can select user or workspace instead of opening the Command drop-down. Much easier to cycle through various themes from the settings editor also.

[ndac-todoroki]

I think most of the use cases are covered already by individual token settings and workspace settings that already work. Pretty reasonable to just set the theme for the workspace you use for C+ files differently from the workspace for JS projects.

I think many workspace includes several languages, especially Markdown. Many people in this thread are wanting to change color themes for markdown.

[aamarks]

You're right. While you can change font and some color for some differentiation in languages, you can't swap light/dark within the same workspace without an extension like jsaulou's.

[liuyxpp]

Still waiting. I'd like Markdown/LaTeX and any other text based files to be rendered with LIGHT color scheme (I don't care the whole scheme, i.e. sidebar, menu, etc.), while using DARK color scheme for programming languages.