Feedback: Syntax Token Colors

[DHedgecock]

Radical - Syntax token colors feedback

Hello, please feel free to provide feedback on the theme syntax token colors in this issue.

There are also tickets for:

• Editor colors feedback
• Terminal colors feedback

[jdconner]

Love this theme but it really isn't usable with TypeScript, React and/or styled-components.

I'm not able to differentiate:

• text and components (same colors)
• hooks and the variables they're assigned to (the colors are just too close to differentiate)
• enum initialization and usage (during usage, the entire path is the same color, which is also different from the initialization color)
• interface keys and imported values (same colors)
• and more

The React/TS communities are massive and I'm sure if this theme was a little more accessible, it would become even more popular.

[DHedgecock]

Thanks for the great feedback @jdconner 🙌

I setup this example component to get started working on some improvements. Two questions:

1. hooks and the variables they're assigned to -> In this example is that referring to status and setStatus, or to the similarity between those two variables and useState?
2. interface keys and imported values -> Is that visible in this example?

[jdconner]

@DHedgecock Wow, I did not expect you to respond given how old this repo is, otherwise, I would have put more effort into the feedback lol.

That is an awesome example.

1. The latter.
2. No, it is not.

A lot of the issue -- for me, at least -- seems to be that the text, variables, attributes, elements, custom elements and functions have very low contrast to each other so it is straining to determine what is going on in the code, on top of some of them being the exact same color.

To give the best input possible, I recreated your example with some modifications that add some more general use-cases for those in my profession and took screenshots of a theme that basically everyone uses (i.e. the default dark+ theme for VSC) versus the Radical theme. This should give us a pretty good indicator of what could be worked on and how disparate the contrasts are in the default theme versus Radical.

Let me know if there is anything else that I can do to help!

P.S. It'll be a little easier to see the differences if you download the images and put them side-by-side 👍

P.S.S. One thing I think the default theme (and most themes) do poorly is deal with TS+styled-components syntax highlighting (see lines 21 and 26), so I wouldn't focus on those lines too much; it's a weird edge case dealing with tagged string templates and typing them.

[DHedgecock]

I just updated Radical with its first round of real syntax token theming 🎉

There's still plenty of work to do but the update has new colors that are a good start towards better separating different parts of grammars. Most of the focus for this release was keywords and constants. I'm especially into the return null pairing.

Before and after

First real set of syntax token colors

[jdconner]

@DHedgecock I've used the latest update for about a week now and I can say that it's definitely a lot better! It would be nice to have a higher contrast between the different types of element attributes (e.g. string, enum, variable), but it's definitely useable now 👍

[jdconner]

@DHedgecock Can we consider making the this keyword a different color than variables? Looks like making it the same color as the constructor and class keywords may be best? Here is a sample:

Default:

Radical: