Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates tmThemes to match latest VSCode colors #959

Merged
merged 4 commits into from
Feb 6, 2023

Conversation

armanio123
Copy link
Member

Updates typescript and typescriptreact themes to match VSCode colorization.

There are still slight differences between them but this is very close to match all colors.

This is how it looks now on Visual Studio:
Before --> After
image

@zkat
Copy link
Member

zkat commented Feb 3, 2023

@armanio123 What are the remaining differences?

@@ -42,8 +46,12 @@ settings:
- scope: entity.name.type.enum.ts
settings: { vsclassificationtype: enum name }

- scope: entity.name.function, entity.name.type, meta.template.expression.ts, variable, entity.other.inherited-class.ts
- scope: entity.name.type, meta.template.expression.ts, entity.other.inherited-class.ts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- scope: entity.name.type, meta.template.expression.ts, entity.other.inherited-class.ts
- scope: meta.template.expression.ts, entity.other.inherited-class.ts

given entity.name.type is classified as type above .

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, good catch. Fixed.

settings: { vsclassificationtype: identifier }
- scope: variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder
settings: { vsclassificationtype: parameter name }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how come const x = 10 x is classified as parameter name ?

Copy link
Member Author

@armanio123 armanio123 Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed typo. This should be local name.

@armanio123
Copy link
Member Author

@armanio123 What are the remaining differences?

This are some of the differences I have identified:

  • Punctuation, is much more colorful in VSCode.
  • Tags punctuation in JSX, they are darker on VSCode.
  • The delete keyword. I think this is an actual issue on VSCode tho. I decided to fix it for this template.
  • Function arrow. I have not found how VSCode colorize this, I continue to search for it and send another PR when found.
  • The foo function on this screen is misleading. In reality it will show as type. I'm submitting a different PR to match it.
  • The enum members are slightly different color. There's no matching color on the VS side. Nontheless, I decided to still setup the token to allow users to change the color through configuration.

This is the comparison between them:
VSCode --> VS after this PR.
image

@armanio123
Copy link
Member Author

There are some other differences when comparing with the default light colors, but overall I still think is an improvement.

  • Variables.
  • Numbers.
  • Escape character.

Before PR --> This PR --> VS Code
image

@armanio123 armanio123 merged commit 264655f into microsoft:master Feb 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants