[themes] More colorful default theme - Feedback

[aeschli]

The light and dark themes have recently been in the center of attention due to colors being added and removed again.

More colors became visible due to the update of tokenizers in November. In December we decided to remove these again, to stay in sync with the classic Visual Studio Dark and Light themes.

From reactions in #1270 and #1470 and other issues, we learned that we have fans of both the classic Visual Studio dark and light themes as well as the more colorful version, e.g., from comment

The Dark and Light default themes were very nice in 0.10.3, I'm already missing them.

So we decided to bring the colors back in new themes, 'Dark+' and 'Light+'.

You can currently try these out by installing the extension 'Colorful Default Themes'. The plan is to add them to the built-in themes in the January build.

In addition to 4 major colors in the Visual Studio themes (comments, strings, numbers and keywords) we now have again colors for

• control flow keywords
• type names
• function names
• parameter names

When trying the new themes out, you will still find some keywords like 'import', 'module' nor correctly highlighted. These are issues in the tokenizer that we are working on. Please post your findings here, if possible add a code snippet and don't forget to mention for what language it is :-)

[bpasero]

I love the new light theme plus! <3

[bpasero]

The dark theme seems to color functions different compared to light plus. I am not sure though colouring functions adds much value.

[rickmed]

for me the old and the new themes look exactly the same (javascript).
EDIT: I'm seeing the color changes described. Sorry.

Although, for example, I'm not seeing parameter names colored in arrow functions. Is this supposed to be supported?

response (MA): this is a issue of the JS/TS tokenizer, I filed issue microsoft/TypeScript-TmLanguage#42

The problem which the other themes do not display colors as expected persist. EG: monokai not displaying the parameter names in orange. Is this related to the tokenizer issue?

response (MA): again this has to do what scopes the tokenizer uses and what Monokai is coloring.

[borgdylan]

Thanks for making these themes available again. Colour can be used as visual metadata while navigating through code, so the more colourful the better.

[Tyriar]

C++ includes aren't colored correctly in Dark+ or Light+, both color the whole line as purple:

Dark:

Dark+:

[Tyriar]

@bpasero coloring functions in C++ feels pretty essential:

Dark:

Dark+:

On this, it would be nice if the coloring was somewhat consistent across languages, as in functions are colored the same in all languages. It's a little weird how Java functions seems to be colored differently to js, c++ and (especially) C#:

Dark:

Dark+:

[aeschli]

I'm still working on better c# coloring. Unfortunately the tokenizer we use for c# behaves differently.

[aeschli]

I delivered a fix for csharp. Please update the extension.

[Tyriar]

[Dark+] Not sure if this is intentional but Java strings are colored inconsistently based on whether they're assigned to variables or not:

Styled with:

.monaco-editor.vs-dark .token.string.quoted.variable {
    color: #74B0DF;
}

Styled with:

.monaco-editor.vs-dark .token.string, .monaco-editor.vs-dark .token.string.tag, .monaco-editor.vs-dark .token.string.value {
    color: #CE9178;
}

[ddotlic]

The Dark+ is better but there are issues, likely with the new tokenizer (all in TypeScript):

• Types of return values are not colorized for non-builtin types (so all my types are not colorized)

• Sometimes, if the return type is generic, part of it is colorized the same as function name

• Keyword public is colorized like type when used in constructor

• All words in a lambda are colorized like types

• I don't recall if methods - when called - were also colorized before? (declarations are now colorized fine)

All in all, a step in a right direction 😄 I sincerely hope you had a good reason to change the tokenizer because coloring was really great before...

[nomenon]

please fix this (C#)

[aeschli]

@nomenon First issue is atom/language-csharp#47
Second is likely atom/language-csharp#46

[nomenon]

@aeschli 2) not exactly the same problem

[bpasero]

@aeschli not sure I like the color of functions in light theme:

A function name should stand out from other things like the visibility. Using a grey here puts the name to the background and it is harder to catch with the other colours we now use.

[aeschli]

@bpasero There's a better color on the way. Please comment in #1943 for the tuning of colors.

[adnan333bd]

Could 'module' have same color as 'class' or 'interface' ? I would love that ....
And it seems contructor does not have same coloring as other functions .... shouldn't that be?

MA> that's microsoft/TypeScript-TmLanguage#37

[felixfbecker]

Keywords like function, let, const, var are colored wrong (like interfaces/classes) in latest update in JS files. TS files are not affected. This is so ugly I wish it was possible to revert extension versions xD

[dwbruhn]

This is definitely an improvement! In JS, however, when declaring multiple var's, only the first one is colorized (testSource in the example below):

[aeschli]

@felixfbecker, @dwbruhn I made a fix for this, please update to the latest version of the extension.

[felixfbecker]

@aeschli fixed, thanks!

[dwbruhn]

Hi @aeschli, I'm running version 0.1.10 of the extension, but I'm seeing the same issue: testSource and reportsDirectory are both variables but different colors. It's just a little weird to see only the first one colored:

Webstorm, for example, leaves them uncolored, but they're both uncolored at least:

[aeschli]

@dwbruhn That's microsoft/TypeScript-TmLanguage#41. Sorry, I didn't realize that before.

[aeschli]

Closing as fixed. The new themes will be part of VSCode in the January build. It is no longer needed to install the themes extensions from the marketplace. In fact, everybody who has installed them can uninstall the extensions to avoid duplicated entries in the theme selection dialog.