Studio Styleblog

New: change your preferred font

Now you can save a preferred font for your account. It'll show up when you're previewing themes, and when you download them too.

To change your preferred font, first log in or register. Then edit your details by clicking your name or user ID at the top right of the page. You'll see a couple of fields to change your preferred font.

Capture

I've put 3 common monospace fonts in the drop-down, but I know that won't satisfy you—you can choose “Other...” and type in absolutely any font you want. Comic Sans MS, anyone?

It'll only work if you have the font installed on your computer, otherwise you'll make everything look quite bad :)

New: import .vssettings XML

Have you already created a beautiful theme directly in Visual Studio? You have my respect and my sympathy—that's more pain than any developer should have to experience.

Now some good news—if you want to get your theme onto Studio Styles, you won't have to do even more work by copying colors in by hand. There's a new import function to do that for you—because hey, what are computers for if not repetitive, boring tasks.

Capture

Look for the “Import .vssettings” button down the bottom of the screen when you're creating or editing a color scheme. Paste in the XML that you exported from Visual Studio (Tools > Import and Export Settings > Export selected environment settings) and your theme is now studiostylified.

This button only imports the colors that Studio Styles supports—if you've exported your VB colors, keyboard shortcuts or bank account details they'll just be ignored.

This news comes a bit too late for Damien Guard and others who have spent time importing their themes by hand. But for everyone going forward—if you've tweaked your theme in Visual Studio and you want to re-import the changes, it should be a lot easier.

If you run into any problems, please let me know.

Breakpoint support

I just added support for changing breakpoint colors—you'll find it in the Advanced highlighting section.

Capture

This is the nSolarized theme by Chris Nicola

I spent a bit of time getting it to change the circle and arrow colors too, but then I realised Visual Studio doesn't actually support that. Whoops.

It looks like VS just uses bitmaps, which is why you get nasty aliasing effects around the circle when you use a darker color for the indicator margin.

It also means if you choose anything other than the default breakpoint maroon and yellow colors, it's likely to look a bit strange. But hey, it's there if you want to use it!

Updates: download and voting history

I've spent the last couple of afternoons Razor'ing studiostyles — it's nice to see my views looking a lot cleaner.... but probably doesn't interest anyone else.

What you might find more interesting: the new “historical” details on your user page. When you're logged in and you click your username (top right), you'll see a list of the most recent schemes you've voted for and downloaded, and there's a full history if you need it. 

History
I've found it quite interesting to look back at all the color schemes I've tried out, and as @pandincus pointed out, it'll be handy when you're working on more than one computer. Just keep in mind you have to be logged in when you download for the download to be tracked — I'm pretty sure I've downloaded Jellybeans about 13 times, but 11 of those times I wasn't logged in.

Oh yes, and I have been tracking this info all along, just for this purpose (no, not to sell to Micro$oft). Thank you to those people who encouraged this feature.

Studiostyles now supports Razor syntax

If you're reading this blog, you probably already know that Razor is the new view engine for ASP.NET. Studiostyles supports Razor syntax now—check out the growing list of color schemes that have already been updated to support it.

Authors can log in to update their existing color schemes – it's just one extra color setting to update. If you're signing in with a Google Account, you may find you can't access your original user account on Studiostyles – this seems to be due to the domain name change and will have to be resolved manually. Please email me (luke at studiostyles dot info) and let me know your scheme and the user account you end up with (e.g. user1234 at top right when you sign in).

 

New "advanced" highlighting

If things have been a bit quiet for the last 2 weeks, that's because I've been working on the biggest update since the site launched: adding support for more color elements. Check this out:

Advanced

Phosphorescent theme by Jason Kozak

This is all available now on the website - look for schemes with the advanced tag to see examples that support this feature. Authors can edit their existing schemes to add support for these.

For those of you keeping track, the new color elements include:
  • Collapsible and collapsed regions
  • Highlighted references
  • Inactive selection
  • Code outlining
  • Errors and warnings
  • Excluded code
Many of these elements have one or two things that make them difficult to implement in a web-based editor, which is why they didn't make it into the website before it launched. If I've done a good job implementing them then you won't notice how tricky these were, but for anyone interested here's some more background info.

"Squiggle" underlines for errors and warnings
This was my first experiment with the HTML5 canvas, and it was fun. It brought back memories of learning Logo in primary school, where you tell the turtle PEN DOWN, FORWARD 10, RIGHT 3 etc. Who would have thought that would ever come in handy?

I had a go with SVG at first, but after a few failed attempts at a hack, I decided to be a real man and draw bitmaps directly to your browser.

Squiggle

The squiggles work in Chrome, Safari, Opera and Firefox. If you're using Internet Explorer you'll see a fairly unexciting dashed underline, but you can still edit the colors.

Code outlining
This was the quite hard to do in HTML & Javascript. I could have gone with SVG or canvas again, but there wouldn't have been a fallback for IE which accounts for 1/3 of the traffic on Studio Styles. So it's all basically <div>s with borders. Supporting various fonts and font-sizes was tricky too - I wanted it to work with other fonts eventually, and of course if you browse with a larger font size everything should still line up.

Alpha compositing
Visual Studio uses opacity for some of the elements, e.g. Selected Text, Collapsible Region (the foreground color is used in the margin background when you hover over a region). Previously I had kludged these using a transparent <div> overlay and let the browser do the work, but it was messy. I switched to manually calculating the combined background colors using the A over B algorithm here. It's much more satisfying.

New color settings for XAML and User Types

Yesterday I added support for XAML and a couple more "user types" settings. Below are some examples using Damien Guard's Twilight theme (based on the TextMate theme of the same name).

XAML
Xaml

I've automatically updated existing themes to use XML colors for XAML. As you can see from the bright red and blue highlighting above, authors will probably need to tweak some colors manually.

If you're creating a new color scheme, you'll see a button to "Copy colors from XML" when you're editing XAML colors. This should save you a bit of time if you want your XAML to look mostly like your XML.

Copy

More "User Types"

I've also added support for delegates and value types, shown below.

User-types

For existing themes, these new settings have been automatically set to the same color as the "User Types" setting.

One week old

Just over a week ago I uploaded Studio Styles to my web hosting account, emailed a few people about the new website, and went to bed. I was happy to get the experiment launched, and hoping that someone would find it useful and word would gradually spread.

I woke the next morning to find thousands of people were visiting the site already - creating, downloading, tweeting, emailing and sending in feedback. I was really impressed at the level of interest and the positive response. Thank you to everyone who's helped get the word out about Studio Styles, especially Scott Hanselman.
 
To date the website's had 10,925 unique visitors, which has wildly exceeded my expectations (whatever they were). There are also some really, really ridiculously good-looking themes available now; some old favourites, and heaps of awesome new ones. To me, just the fact that I have easy access to all these great themes makes the work totally worth it. Thank you to everyone who's submitted a theme and made working in Visual Studio more fun.