Azure Data Studio Custom Theme

I have been using Azure Data Studio, formerly known as SQL Operations Studio, a lot lately as my current role at work has been to modify and analyze data to create reports. I am a huge fan of VS Code as, before I started using SQL more on the job, I was a software developer creating software and websites with TypeScript using VS Code and a few awesome theme extensions. Namely Night Owl by Sarah Dresner. I decided to create my own for Azure Data Studio because the only one available besides the default ones that I didn't like was Atom One Dark. Now there isn't anything wrong with this theme. As a matter of fact I loved this theme when I used to use Atom and when I first converted over to VS Code used it heavily day in and day out. But watching several tutorials of really awesome instructors and programmers through Frontend Masters courses I wanted to know the theme they used. Specifically I wanted to know which one Jason Lengstorf used in all of his videos on Twitch and Frontend Masters.

Night Owl

The custom theme that he used was Night Owl. As stated above Night Owl was created by Sarah Drasner, who is an awesome CSS guru and used to be a regular on the super awesome podcast Front End Happy Hour with a lot of the instructors from Frontend Masters. I quickly fell in love with the theme and have adopted to every instance of VS Code I use from my work computer to my personal laptop and desktop. Where ever I have VS Code installed Night Owl is usually the first extension I install. I also use it on my Jetbrains Ide's like PyCharm, Android Studio and IntelliJ Idea Ultimate. Love it.

So... Why Not Use It with Azure Studio?

Great question. Why not just use the one that already exists for Azure Data Studio? Well I can't. The format that Azure Data Studio uses is <name_of_file.vsix> I tried to find the Night Owl vsix file but I wasn't able to find it. So I decided to go out and create my own look alike theme based on Night Owl for this software tool.

Creating Your Own Theme?!

I know that it sounds really intimidating and I won't lie I was pretty intimated about doing it at first. But when you google Night Owl, or any VS Code theme for that matter, you are taken to the Visual Studio Marketplace where the download for the extension of VS Code resides. I thought to myself surely the vsix file is here right? No it's not. To make matters worse if you click on install it takes you to VS Code and opens the extension tab to that extension which again doesn't help. So I decided to take the plunge and figure out how to do this. Now of course this isn't really necessary in order for me to get the job done. I mean I use SQL Server Management Studio normally which, if you've ever used the tool you know that the dark theme is kind of lame and not much thought went in to it at all. So I am thankful for Azure Data Studio because it allows me to actually give the tool I use a way to customize the theme better than what used to exist.

How Did I Create It?

There was a tutorial for creating your own custom extension which you can find here. I followed the first few steps and then deviated ever so slightly. Once you install the tool and start the yeoman cli to generate your extension project instead of selecting what the tutorial said I chose New Color Theme. Then it was just a matter of answering the on screen questions like name of the extension, and name of publisher, etc. After all of that the tool creates the files and a package.json file that you can modify with the colors you want. The end result is your own custom theme that didn't exist before for a product that you are excited about using now. Once you have the colors you want for the properties you think you want them in. You need to test your work. At this point I reverted back to the original tutorial to see how to test my theme. I followed the steps, installed the necessary libraries and then created my own .vsix file that I could then import into Azure Data Studio to test. Voila a working theme. As seen below:

Dark Theme Default:

Night Owl Custom:

Normally on the left hand side in VS Code the Night Owl theme has that the same color as the text input window but I decided to leave it the black color to separate the two windows.

Conclusion

Overall the most time consuming part was finding the colors that I wanted to use and where the colors needed to be in order for them to work the way I wanted and what I was used to. I am pretty excited to start using my custom theme and will enjoy manipulating and querying data a lot more using Azure Data Studio.