[themes] simpler way to create and edit themes

[hbarr]

Newbie alert: I have been programming for 40+ years and used many different code editors, but I am relatively new to VSCode.

I do not like any of the standard colour themes so I thought I would edit an existing theme or define a new one of my own. You can do this easily in many other code editors.

However, the documentation implies that all I can do is trawl through hundreds of themes for other editors (TextMate or Sublime Text) and convert them... Yes, I have tried searching more widely, on StackOverflow and elsewhere. It seems to be a common issue for VSCode users.

Surely, it should be possible to edit a theme in much the same way that settings are handled? The theme should be specified ultimately with one or more (per language) JSON files that the user can edit or overlay. Something somewhere in VSCode is doing the equivalent of parsing the text, tagging the components and looking up the right colour in a map. That map could be loaded as a JSON file.

• VSCode Version: 1.10.2
• OS Version: MacOS 10.12.4

Steps to Reproduce:

1. Try to edit or create a theme!

[aeschli]

Right now the story is that you can create a new theme using the yeoman generator as described here.
After that you could edit it and tune it to your liking.
There are clearly some inconvenience along that way that could be improved.
a. As our syntax tokenizers are based on TextMate and generate a hierarchy of scopes, one must learn about the standard TextMate scopes in order to write a theme.
b. TextMate theme files are typically plist files (XML)
c. To test your theme one must reload VSCode. It would be nicer if changes are applied as you type

b. and c. are on our list to be improved.

Please add your ideas on what should be improved.

[Tyriar]

@hbarr I'm working on something that should help out with this, stay tuned 😃

[hbarr]

@aeschli Thanks Martin. Now I understand the role of TextMate in VSCode. 😃
I had seen the Yeoman generator reference, but thought it an unnecessary complication.

@Tyriar Thanks Daniel. My tuning dial is set. 😃

[hoovercj]

@Tyriar @aeschli is there still going to be room for something like #21981?

[Tyriar]

@hoovercj something like that is doing to be previewed in v1.11, you can check out the release notes now but it should be released today. https://github.com/Microsoft/vscode-docs/blob/vnext/release-notes/v1_11.md#preview-workbench-theming

[Tyriar]

My personal answer to this which builds on top of the workbench theming work is this https://github.com/Tyriar/vscode-theme-generator

It's an npm module that lets you generate a theme based on a small set of colors, allowing you to go deeper if you want and color specific things like "identifier", "keyword", etc., as opposed to targeting tmTheme scopes. Please send feedback my way, also remember it's early days and the API will break (both VS Code and the generator).

[hoovercj]

Thanks for the update!

I like the idea of having a theme generator as you mentioned, and I think it really lowers the bar to entry in creating and distributing themes for extension developers, but I don't believe it solves the issue of personalizing code for users.

The workbench overrides in settings that are in the preview seem more in spirit with my PR and with this comment which do aim to solve the personalization user. I hope this is expanded upon for all theme overrides and made official as the API stabilises because it simply isn't good enough to force users to create a new theme to change one color or add italics for every theme they want to customize.

Also, I think this issue should be closed in favor of #11556 which encompasses the idea of theme ease-of-use

[hbarr]

@Tyriar Thanks for the links. It looks like imminent releases of VSCode will address some of these usability and configurability issues.

@hoovercj Thanks for the cross-links to similar topics on #11556 and #459. The issue of making minor changes to a theme without having to create a new one with external tools has been raised before. The overlay style sheet is an interesting idea.

I would be happy to migrate to #11556

[Tyriar]

@hoovercj I think #11556 could be closed off when the new theme settings are finalized (likely 1.12), that allows users to change any one-off color as you want. This issue though would be better kept open until the generator is iterated on and some of it potentially upstreamed to VS Code and/or included in the yo generator.

[hoovercj]

@Tyriar oh ok, it wasn't clear to me from the release notes just how wide the settings would be, or if they were intended to be a longer term solution or only a temporary patch to be removed in favor of using the values in themes.

All this information together has me confident that the solution you're working towards alleviates the major pain points with themes, I'm excited to get my hands on it. Great work, as always :-)

[Tyriar]

Closing this off, as of v1.12 you now have the option of:

• Standard .tmTheme files (Yeoman generator available)
• Setting theme keys in workbench.colorCustomizations setting
• Generating a theme using the new command via the command palette
• Theme generator https://github.com/Tyriar/vscode-theme-generator or other generators which can improve the theme editing experience using the underlying platform.