I can be very particular about the strangest things, and when I picked up Azure Data Studio (pka SQL Operations Studio) I immediately noticed that the syntax coloring wasn’t quite what I wanted.  Since Azure Data Studio has VS Code under the hood, you can install any theme you find on the VS Code marketplace into Azure Data Studio.  The trouble with those themes is that they aren’t usually focused on TSQL syntax.

All of the color theme development concepts are the same between VS Code and Azure Data Studio ( https://css-tricks.com/creating-a-vs-code-theme/ ). If you’re all set up for Azure Data Studio extension development, you’re ready to go.

If you’re not setup for extension development, you can be in under 15 minutes by installing:

• VS Code
• SQL Operations Studio Debugger for VS Code
• Node.JS
• vsce
• yeoman sqlops generator

Basically, everything from my GitHub walk-through on extension development but Typescript is needed to create a custom theme.

The primary task for creating a quality Azure Data Studio theme is paying extra attention to how TSQL is parsed and tagged by inspecting the TM (text mate) scopes in Azure Data Studio.  You can get to the TM inspector by opening the command pallette in Azure Data Studio ([cci]ctrl+shift+p[/cci]) and start the “Developer: Inspect TM Scopes” command. Now when you hover over your query text, the scope entries appear.

In this instance, the FROM keyword in my query is tagged as [cci]keyword.other.DML.sql[/cci],  which means if I want those to stand out I need to adjust the settings for that scope.

[cci]
{
“name”: “DML”,
“scope”: [
“keyword.other.DML”,
“keyword.other.DDL”,
“keyword.other.data-integrity”
],
“settings”: {
“foreground”: “#1776e4”
}
},
[/cci]

Now as you begin to adjust the colors of the theme, you can test it out by running a development instance of Azure Data Studio.  Before you launch from the Debug menu, open [cci].vscode/launch.json[/cci] and replace the runtimeExecutable sqlops with azuredatastudio.

Chances are you’re better with colors and design than I am and won’t have any trouble coming up with a visually pleasing and functional color theme.  For documentation on all the theme options, check out the VS Code documentation.

Now that your color theme is pretty much perfect, you can package it up using vsce.  Update the _package.json _and README files with the relevant information. In the VS Code terminal, type vsce and hit enter. This will create a .vsix file in the root folder of the project which can be used to install your theme anywhere.

If you’re willing to share your theme, connect your repository to GitHub and push the source code.  Create a GitHub release with the .vsix file created by vsce. To publish your theme (or any other Azure Data Studio extension), follow through the next section.

Find the Azure Data Studio repository on GitHub, and fork it.  This creates a copy of the code in your account on Github for you to submit changes from.  Switch to the release/extensions branch and go to the _extensionsGallery.json _file.  You can edit this file right in the browser – you’re going to be adding an entry to the results array with your extension information.  Your best bet is to use a previous entry as a template (increment the id number by 1).

Commit your change to the extensionsGallery.json file, then open a pull request from your fork.  The Microsoft code maintainers will review your request, provide any necessary feedback, and soon your theme will be available right from Azure Data Studio!