Change Visual Studio 2015's dark theme's TypeScript color scheme

Question

If you're using Visual Studio 2015 + Dark Theme + TypeScript, you'd probably notice that the property of a class gets rendered with a black font. The black font on top of a very dark gray background is nearly unreadable. Here's a screenshot:

It appears identifiers also get rendered with a black font.

I've looked under Tools->Options->Fonts and Colors for a way to change this but not having any luck.

Is anyone else using this combination? What is the best solution for making the .ts file more readable with the dark theme? Do I need to just hack whatever the theme file is (no idea how to do that, yet, at this point).

Thanks, Jayson

Answer 1

Normally this happens when you change your theme. If you change theme from Light to Dark or Blue to Dark, you may have experience this black letters in black background.

You may have similar experience if you change theme from Dark to Light or Blue, then you may have experience of white letters in white background.

Resolution: Just Restart Visual Studio IDE.

Answer 2

When you change themes, You just reset visual Studio

Answer 3

I faced this issue and what solved is a reboot of the system.

Every time when I go from light theme to dark theme the text stays opposite and vice versa untill reboot is done.

It didn't require me to update anything. Just a reboot when I change the theme.

Answer 4

I had this problem, too. I upgraded my installation of TypeScript to 1.8.6 from here, choosing the Visual Studio 2015 option. Then I restarted the IDE and everything looked wonderful. Hope this helps for anyone who likes the dark theme!

Answer 5

For anyone who's having this issue (since I've just installed vs2015 and seems still persisting) just solved it installing the latest update available for ASP.NET and Web Tools 2015 from here

Answer 6

TypeScript 1.8 beta seems to have corrected the black identifiers on dark theme.

Answer 7

So, I was able to fix this. But, first, here are some background that sort of lead me to believe that this was more "solvable" that I initially thought.

I use VS2015 on multiple computers: one on my surface book (a Win10 machine) and on my work machine (a Win7 machine). On both VS instances, I'm logged in with the same profile account, therefore, by default, settings (including the selected theme) are synchronized.

I noticed that .ts files were rendering just fine on my work machine but not on my laptop. At first, I turned of synchronization so I can keep my laptop using the Light theme, while my work machine used the Dark theme.

All of this made me wonder if there were some settings from my Win7/VS instance that wasn't playing nice with my Win10/VS instance. So,..

I reset my settings by going to Tools -> Import and Export Settings and chose to Reset all settings. I chose not to back up my settings, but that's up to you if you're following along with this.

I chose an environment. The first one I chose was the C# Development environment, but that still had the same issue. I then performed the reset again, and this time chose the Web Development environment. And voila, by choosing the Web Development environment, TypeScript is now looking great in the Dark theme.

Update 12/11/2015. Just a screenshot of my environment (you can see in the background the correctly rendered identifiers, now)

Answer 8

Unfortunately(IMO) VS2015 really changed a lot of their syntax coloring and now it looks ugly.

You can create your own themes or download them from https://studiostyl.es

Tools > Import and Export Settings > (Backup your settings) > Browse for your theme file.

You can also edit the pre-existing themes manually.