Copy and Paste Formatting with Visual Studio’s Dark Theme

Introduction

I recently upgraded to VS2012 and, like most of you, was aghast at the default theme. Sure, after installing the updates, the blue theme was good. But before updating, I tried the dark theme… and I liked it! As our phones and tablets often use dark themes and websites are being remade to look like tablet apps, the dark theme had a modern look to it and is easy on the eyes.

Look, it doesn’t matter what I think of the dark theme. I simply want to discuss an undesirable side effect affecting Copy & Paste (don’t forget Cut too). When copying code to an email, Word, or your IM window, you realize the dark theme has a dark side:

What we get in the first paste attempt is a WYSIWYG copy of the formatting from Visual Studio. Clearly what most of us want is the second paste attempt. And the formatting issue can get even worse. When pasting to some programs, you get white text on a white background. The problem is so obvious it seems the people who made the dark theme don’t actually use it day to day.

I was finding that I needed to: open options, select the blue theme, copy my code to the clipboard, open options again, and reselect the dark theme.

What a tedious workaround! So I went on a quest this morning and am happy to report I have a solution!

1. Open Tools -> Extensions and Updates
2. Select Online (Visual Studio Gallery) and search for Productivity Power Tools 2012
3. Download and restart Visual Studio when prompted
4. Open Tools -> Options
5. Expand Productivity Power Tools and select HTML Copy

1. Change the BeforeCodeSnippet option to:
   XML

   <style type="text/css">.identifier {color:black !important;}</style>
   <pre style="{font-family}{font-size}{font-weight}{font-style}">

2. Change EmitSpanClass to:

   True

3. Check EmitSpanStyle is:

   True

You may want to optionally turn off all other features other than HTML Copy from the “All Extensions” menu.

Let’s take a look at what this feature is doing. When you copy text to the clipboard, you can have multiple data formats such as Text, RTF, and HTML. When we’re pasting our code into Word or an email, it will typically use the HTML format (configuration dependent). Here is what we actually see in the clipboard when we do a copy after configuring VS as above.

</pre>
<!--StartFragment-->
<style type="text/css">
 .identifier {
 color: black !important;
 }
</style>
<pre style="font-family: Consolas; font-size: 13;">
<span class="keyword" style="color:#569cd6;">var</span>
&nbsp;<span class="identifier" style="color:white;">bob
</span>&nbsp;<span class="operator" style="color:#b4b4b4;">=
</span>&nbsp;<span class="keyword" style="color:#569cd6;">
string</span><span class="operator" style="color:#b4b4b4;">.
</span><span class="identifier" style="color:white;">Empty</span>;
</pre>
<!--EndFragment-->

Note that we’ve removed the background colour which means all of our identifier text is being set as white on a white background. However the style element is overriding the identifier color and setting it to black. This gives us the desired results:

<span style="font-family: Consolas;"><span style="color: rgb(86, 156, 214);">var</span> <span style="color: black;">bob</span> <span style="color: rgb(180, 180, 180);">=</span> <span style="color: rgb(86, 156, 214);">string<span style="color: rgb(180, 180, 180);">.<span style="color: black;">Empty</span>;</span> </span></span>