Making a Theme for Visual Studio in 2021
Tags: dotnet, showdev, devjournal, azure
Published: 2021-06-06 02:09:40

---
title: Making a Theme for Visual Studio in 2021
published: true
description: How I published a Visual Studio extension from my Mac, with Azure
tags: dotnet,showdev,devjournal,azure
cover_image: https://github.com/austinstanding/midnight-deep-vstheme/raw/master/images/screenshot1.png
---

## TL;DR

Dark Theme go brrr, [download it here](https://marketplace.visualstudio.com/items?itemName=AustinStanding.vsthememidnightdeep).

---

## Midnight Deep

⚫ **Midnight Deep** aims to be a true dark theme for Visual Studio 2019.

This theme was born out of a need for darkness; to rest my eyes after an extended period of working long hours and feeling like all the other dark themes just weren't **dark** enough. This aims to be that dark theme. Midnight Deep draws from the palette of my first theme 🌌 **[Midnight Lights](https://marketplace.visualstudio.com/items?itemName=AustinStanding.vsthememidnightlights)**, while providing a true hex #000000 background and lower brightness generally. This won't be for everyone or every occasion, but my vision is to provide an after hours theme that will let your eyes find rest even when you can't.

That being said, I have tried to make the contrast acceptable for day-to-day use too. If you find yourself squinting because the glare off your monitor is brighter than the element you're trying to see, I recommend you try a lighter theme like the one mentioned above 😉 I will also apologize in advance and say there are way too many popups and features that can't be themed which may stun you after your eyes have adjusted to this theme.

## My Process

### Story Time

Ironically this extension was written and published from a mac. The process started with my first theme, which I was permitted to create using my work laptop at the time, and I used the then new [Color Theme Designer](https://marketplace.visualstudio.com/items?itemName=ms-madsk.ColorThemeDesigner), which allows you to create a custom theme as a full-blown solution with access to the .vstheme file and outputs a .vsix ready to go. I wrote about the experience here:

{% link https://dev.to/austinstanding/making-a-theme-for-visual-studio-in-2019-f82 %}

Sometime after publishing I had changed jobs, working for a healthcare company with a strict no personal projects policy. Suddenly I found myself with a Visual Studio extension to maintain, and only my personal laptop *(a mac)* to do it with.

### A Breakthrough

I discovered and made heavy use of [a blog from Meziantou](https://www.meziantou.net/ci-cd-pipeline-for-a-visual-studio-extension-vsix-using-azure-devops.htm) detailing how to package an extension using Azure, and showing everything you need to do it. I used Azure DevOps pipelines to build and package my theme, and I could have even used it to publish updates directly to the VS Marketplace but found out the hard way that VsixPublisher does not support the Themes category. It even automatically increments my versioning 😁

My day to day would look something like this:

- Use my work-in-progress theme on my work laptop
- Take notes on my phone about what bugged me
- Get home and open the project in VS Code on my personal laptop
- Stumble around for the items in the .vstheme file
- Commit changes to Azure
- Download the build
- Repeat

Needless to say, pretty ugly. I was doing a lot of guesswork and a lot of rework, and I didn't stick to it for long. Fortunately, I've since moved back to the job that allows me to work personal projects on my work laptop. My workflow has evolved, yet stayed largely intact.

### Another Step

Once again having access to Visual Studio again outside of office hours, I found myself moving to the deprecated [Color Theme Editor for Visual Studio 2019](https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.VisualStudio2019ColorThemeEditor). While it's clearly signposted to look past this extension to the previously mentioned Color Theme Designer, it still feels quicker to use when you just want to troubleshoot a theme, or customize an existing one. My workflow grew into looking like this:

- Use my work-in-progress theme on my work laptop
- Take notes on my phone about what bugged me
- In my freetime copy my WIP theme as a custom theme
- Open the project in VS Code
- Stumble around the Color Theme Editor for the items
- Make changes and apply them to confirm they did what I thought
- Make the same changes in the .vstheme file on my personal laptop
- Commit changes to Azure
- Download the build
- Repeat

## Learnings

This was great for me because whenever I had access to Visual Studio I could cut down the inner loop, but when I didn't have access I could still work on things. Being able to do both things sped up progress and kept me engaged. It also helps to have poured hours into trying to figure out the word salad naming conventions that have **no documentation** to tell you what *That One Thing* is called.

All in all it's been a good learning experience, and I intend to take my learnings back to Midnight Lights for another quality pass.

If you're interested in looking into how it was done, the code can be found below, and you may [download Midnight Deep from the VS Marketplace here](https://marketplace.visualstudio.com/items?itemName=AustinStanding.vsthememidnightdeep).

{% github austinstanding/midnight-deep-vstheme %}