[themes] make color themes user configurable

[khaosdoctor]

I really liked the last updates the team has made in order to improve Code even further, but one thing I do miss from Atom (since I switched to Code) is the ability to change the syntax highlighter colors on the fly, we could just open the debug tools, look into the classes, then just finding them inside the less file and boom! We could change the way languages were colored inside the editor.

This is something that really annoys me because some languages simply do not have color support...

[aeschli]

You can switch color themes, and also create your own themes. To change the colors on the fly, you could open the dev tools and modify the underlying colors in the css.

Not sure how that helps you with languages that don't have color support. That has to do with the installed grammar. Can you tell me more how you modify these?

[khaosdoctor]

I don't think color themes has much to do with it... The problem I'm raising is about syntax coloring, for instance, on PHP language I have a #FA45AB color for variables, but I don't want that color, I want to change it so I can have a better experience and a better view of my code.

In Atom (as an example), we could open the base CSS file used by the editor to colorize the whole syntax (regardless of the color theme), and edit it.

What I'm proposing is: Editable syntax colorizers. Or something that is not bound to the color theme so the user can edit the colorizer the way it fits best to him.

Thanks! 😄

[aeschli]

The color of the variable scope is defined by the color theme. E.g. for the Dark default color theme the variable color is defined here: https://github.com/Microsoft/vscode/blob/master/extensions/theme-defaults/themes/dark_plus.json#L49. Theme allow you to even define php specific colors.

But I understand you want to change these colors without having to create your own theme, e.g. in the user settings. I updated the issue description, let me know if I misunderstood.

[khaosdoctor]

Yes! This is it.

Even further, I think it would be nice to "detach" the colors from the themes. In other words, make possible to have a "global" style config which applies to all editor and overwrites theme-specific colorization.

[NickDMax]

To get around this for now I have been just adding a custom style sheet. Borrowing the loadjscssfile function from here I just load a css file that I add custom css classes to. I run the function from the console. Very clunky but I think it demonstrates that this kind of feature should not be that difficult to implement.

[aeschli]

Again, you should really look into creating your own theme. Take a theme you like, copy it, change the name, link it to your extensions folder. Start VSCode, pick the new theme. Change some colors in the theme file, 'Reload window' and you see the new colors. And if you got the perfect colors you can even publish it and share it with the community. I'm 100% sure that's easier than hacking scripts, and also what you would do in the user configurations if we added that support there.

[khaosdoctor]

Yeah, it's cool but I think to create a theme just to change some colors is a bit too much... Maybe if we could just create colorizers and share them with the community... It'd be nice too 😃

[NickDMax]

You know rolling your own Theme is not exactly easy. There is a good deal of trial and error - then once you get it working in debug you have to then deploy it. Then 10mins later you open some file type you thought would be covered and find yourself back again.

A Theme that works for one language generally does not in another. For example, most of the themes are pretty bad at XML and property files. So if you really want to get VSCode usable across many languages (that is the whole reason I am interested in it) you have to actually create language specific themes and merge them all into one big mega-theme. This is quite time-consuming. My little hack takes moments -- however, I don't see why it can't be an extension.

[johndugan]

@aeschli I am in the process of porting a theme I wrote for sublime to vscode. There are many missing scope selectors in vscode that are present in sublime. Can I setup my setup my vscode extension with extra .tmLanguage files that augment the existing vscode language definitions?

I read through the vscode documentation, but it's still pretty unclear to me how I go about augmenting the scope selectors for existing languages. Perhaps you could explain (or point me in the right direction) how I could augment the existing JavaScript scopes with Babel's definitions, and roll that up in my theme extension.

[aeschli]

Breaking the source code up into scopes is the responsibility of what we call the grammar, specified by tmLanguage files. You can't augment the built-in grammars, but replace them, by contributing a grammar for the same language id. See here for the grammar contribution point.
Your package json would look like that, assuming you want to replace the javascipt grammar:

{
    "name": "babel",
    "description": "JavaScript Babel Support",
    "version": "0.0.1",
    "publisher": "someone",
    "engines": {
        "vscode": "0.10.x"
    },
    "categories": [
        "Languages"
    ],
    "contributes": {
        "grammars": [{
            "language": "javascript",
            "scopeName": "source.js",
            "path": "./syntaxes/JavaScript (Babel).tmLanguage"
        }]
    }
}

Additionally to that you could add your color theme, but you'd rather keep them in separate extensions.
Having said that, color themes should work equally well will all grammars ant not rely on specific scopes.

[johndugan]

Okay, my concern is namely JavaScript hooks/scopes for my theme file. I'm not sure about how much/many scope definitions there are for other language. JS is where I started on the theme I am porting.

I completely understand and agree that themes should work without any dependencies for built-in languages. I am just finding the provided scope hooks for vscode to be lacking for a number of things I want to apply color to - regular expression slashes, functions assigned to storage keywords, etc.

I wouldn't mind compiling a list of examples, but I'm not exactly sure of the best way to submit them for review and possible inclusion.

[PunchyRascal]

I personally find it rather nice that I can open the dev tools in the editor and edit all the styling to my liking (not only languages, but UI as well). A great thing would be if these changes could somehow be persisted into some custom css file, or if there was a custom css file where I could copy these changes and they would be applied on the fly.

[khaosdoctor]

Like Atom does with its custom.less stylesheet

[victormejia]

This would be so useful, creating a custom theme is not easy at all, and process of trial and error until you get it right.

[mike-lischke]

May I add another view angle: what if your language requires styling that is not in any of the existing themes (see all the special styling for JSON, but there are others)? Themes are free to define styles for any token type and many authors don't care about things they don't need. So it would be great if an extension could override/add-to a theme's settings, instead of shipping with an own theme (as I did with my ANTLR extension).

[d-akara]

A slightly different use case and implementation:

There are many great themes where the color and contrast don't fit the monitor or lighting conditions of the user. For this, I would want a way to adjust the overall colors via contrast, brightness etc.

As example, the online theme editor allows adjusting overall colors under the 'color adjustments' button.
http://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai

[jens1o]

I would also prefer to have the option with a custom scss/less/css stylesheet over copying a theme.

[khaosdoctor]

@jens1o That's the point 😄

[balupton]

For what it's worth, I've been able to automate the customisation of a theme to a certain extent by creating a bash script that does a replacement of the theme file of the specified theme. It works well.

https://github.com/balupton/dotfiles/blob/64a4ca5700f43a4f4ad50878d7e90a3627b84382/.user.sh#L459-L468

[hoovercj]

I can see that this issue has more recent activity than #459 which seems to cover the same topic. I suggest closing the other issue as this issue has more substantial conversation on it.

I would also like to elaborate on a use case that I would like for this:

For my personal development environment I would like to override the font that I use to be the Operator Mono font and I want certain tokens to be italicized (attribute names in html, literal values in javascript, etc.).

I would like these settings to be able to exist apart from the theme I am using which I primarily use to get the colors that I want.

My ideal scenario is that I set the fonts how I want them and then I go to the extension gallery, download a bunch of themes, and switch through them all until I find the color set that I want that looks good with my font choice.

I can, of course, pick one theme, fork it, and manually apply my settings, but I might switch between white and dark themes for presenting and coding, so I have to manually apply two sets of changes. Then if a new color theme comes out (somebody makes a beautiful Material inspired theme, for example). Now I have to do it again.

I hope that this request gains traction, or if the team is open to PR's they provide guidance on how we can help.

[khaosdoctor]

@hoovercj This is exactly the same use case I had when I created this issue. I think this kind of customization is what most attracts a dev to a familiar workspace, so you can identify parts of your code more easily, it is more productive.

[beansprout]

@PunchyRascal Thanks for the dev tools tip. I just wanted readable punctuation in a theme I otherwise loved! It really shouldn't be so hard to target a simple customization...

What about a tool that displays all font colors used in a theme with user setting targetable key names? (I apologize if it's already suggested!)

[aeschli]

Customizing of theme colors has been added to the April release.
Check our the workbench.colorCustomizations setting.

[Rhywun]

Customizing of theme colors has been added to the April release.

Should note that this still doesn't allow changing syntax token colors like I was hoping.

[hoovercj]

@aeschli we discussed this ability in #21981 but the PR was closed until you could complete the work that you completed with workbench.colorCustomizations but I don't believe that workbench.colorCustomizations addresses this issue. This issue relates to general theme customizations, not only workbench customizations and not only color customizations (I really want to modify the fontStyle to get italics into my themes).

Can we re-open this issue? I'd really like to look at the changes you made and revisit @21981 to see how we can more fully address this.

[khaosdoctor]

@Rhywun Yep, the update does not allow us to change the syntax color only...

[aeschli]

@hoovercj
If you want to want to work on a PR that adds the possibility to add token color rules in the settings, that would be great. But let's create a new issue so we can discuss the design there. I created #27894 with some ideas.