My favorite RStudio theme

My favorite color theme in RStudio is Tomorrow Night Bright. It’s an excellent, dark, high-contrast (‘bright’) theme that I’ve used consistently since I first started using RStudio. Originally written by Chris Kempson as one of the variants included in the MIT-licensed Tomorrow theme series, it has been ported widely to many editors, and is included as a default color theme in RStudio.

In this post, we will cover various color themes in Positron, specifically how they are implemented in the editor (i.e., syntax highlighting) and in other parts of the IDE (i.e., the workbench or chrome around the editor). To do that, we need a great example script that shows off various R features. There’s plenty of good scripts out there, but this is a great opportunity to tell you, dear readers, about my new book and R package.

For the screenshots below, I’ll be using a script from my new book (co-written with Stephanie A. Zimmer and Rebecca J. Powell), which comes with an accompanying R package, srvyexploR. This package provides datasets and scripts to help readers follow along with examples and exercises. The R script, anes_2020.R, displays a wide breadth of symbols and colors. The screenshots below from RStudio and Positron should give you a flavor of the iterative changes we made in the Positron theme as we ported it from RStudio.

To start, here is what lines 347-366 of anes_2020.R look like in RStudio with the Tomorrow Night Bright theme:

Looks great, right?! That’s what I’ve been used to for many years now. Please note that I have rainbow parentheses enabled in RStudio. Rainbow parentheses follow their own color palette, independent from the theme itself.

colorspace::swatchplot(colorspace::qualitative_hcl(n = 7, palette = "set2"))

Now back to the problem at hand

I, like many others, am very excited about the early release of Positron and love seeing the community get their hands on it. As a Posit employee, I’ve had the chance to use it for many months. One of its biggest strengths is the Open VSX Registry extension mechanism. It unlocks infinite customizability, just like in VS Code.

Being so attached to the Tomorrow Night Bright theme in RStudio, I quickly noticed that Positron includes Tomorrow Night Blue by default, but not my favorite theme. I tried out Microsoft’s own Tomorrow Night Bright extension, but the colors felt off. It had an excessive amount of syntax highlighting and an especially distracting use of red. Here’s what the same lines of anes_2020.R look like using the Microsoft port of Tomorrow Night Bright in Positron:

The Microsoft port of Tomorrow Night Bright had dated grey/blue workbench elements, reflecting its original design (released 2015, last updated 2017), rather than the style of more modern dark themes. Looking for other ‘bright’ themes, I found GitHub Dark Default, a sleek dark-and-bright theme with 16.3M installs in the VS Code Extension Marketplace and 156K in the Open VSX Registry as of this writing. It is featured in Garrick Aden-Buie‘s popular Positron Extension Pack, Positron +1e. While very popular, GitHub Dark Default also suffers from excessive (’saturated’) syntax highlighting of R code in Positron:

With help from my brother, I decided to write my own extension to better approximate what I’m used to in RStudio, and I’m pleased to announce that the resulting extension ‘Tomorrow Night Bright (R Classic)’ is now available on both the Open VSX Registry for Positron and the VS Code Extension Marketplace for VS Code!

Here is the final look:

Let’s walk through porting this theme over to Positron.

Creating a VS Code color theme extension

Installing the required software

This tutorial assumes you already have RStudio and Positron installed. If not, do that first!¹

You’ll need a few different programs to create your first extension.

Install Git:

# Install Homebrew (if you don't already have it on macOS)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Git after Homebrew is installed
brew install –cask git

Install Node.js:

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Download and install Node.js:
nvm install 22

Then, restart your terminal:

# Verify the Node.js version:
node -v # Should print "v22.13.1".
nvm current # Should print "v22.13.1".

# Verify npm version:
npm -v # Should print "10.9.2".

Finally, install Yeoman:

npm install --global yo generator-code

Creating the extension

Now that everything is installed, let’s begin actually creating an extension. Point your terminal to your preferred folder:

cd ~/rrr

Then, start Yeoman:

yo code

You will see a welcome to the VS Code extension generator.

Here’s what I inputted into the Yeoman prompt, advancing through each field by pressing Enter:

Yeoman created the following files in the extension’s directory:²

fs::dir_tree("~/rrr/tomorrow-night-bright-r-classic", all = TRUE)
#> ~/rrr/tomorrow-night-bright-r-classic
#> ├── .gitattributes
#> ├── .gitignore
#> ├── .vscode
#> │   ├── launch.json
#> ├── .vscodeignore
#> ├── CHANGELOG.md
#> ├── README.md
#> ├── package.json
#> ├── themes
#> │   └── tomorrow-night-bright-r-classic.json
#> ├── vsc-extension-quickstart.md

The resulting folder contains all of the files necessary for the color theme extension.

• package.json – this is the manifest file that defines the location of the theme file and specifies the base theme.
• themes/tomorrow-night-bright-r-classic.json – the color theme definition file.
• vsc-extension-quickstart.md – this serves mainly as reference and you can feel free to delete it after reading it.

If you open the folder in Positron and press F5, it will open a new Positron window with the header [Extension Development Host] which has your extension loaded. From there, open the Command Palette with Shift+Cmd+P and navigate to Preferences: Color Theme where you can select Tomorrow Night Bright (R Classic).

Right now, it looks identical to the Microsoft port of Tomorrow Night Bright and is far from a perfect match for RStudio’s implementation. Let’s customize!

Customizing the extension

First, gather all of the color themes that you’ll use for inspiration. In our case, the file tomorrow-night-bright-r-classic.json in our local extension created by Yeoman currently mirrors the Microsoft port of Tomorrow Night Bright. The next steps for us are:

• Inspect the colors in GitHub Dark Default. If you have it installed, the theme file is located at ~/.positron/extensions/github.github-vscode-theme-6.3.5-universal/themes/dark-default.json or similar depending on the version of your copy.
• Change a color setting in tomorrow-night-bright-r-classic.json and review how it impacts your theme in the [Extension Development Host] window.
• Wash, rinse, and repeat until you’re happy with how your new extension looks!

This is the part of extension development that took the most time. It would be difficult to walk you through all of the individual design decisions we made while porting the theme. Briefly, since GitHub Dark Default is a great dark extension, it helped a lot to start with its settings, then to tweak its colors to superimpose editor and workbench colors specific to Tomorrow Night Bright. We kept most of GitHub Dark Default’s workbench colors, except that we changed its workbench green/orange accent colors to blue/orange accent colors — to match the Tomorrow Night Bright theme and aesthetic. In the end, we were able to port the editor colors to behave quite close to how they do in RStudio. We’re quite happy with the result!

Below I’ve reproduced tabsets with editor and workbench colors across the original Tomorrow Night Bright, original GitHub Dark Default, and the new Tomorrow Night Bright (R Classic) for reference. If you’re interested in seeing the R code we used to tame three JSON theme files into the tabsets below, you can find it here.

Editor Colors

Workbench Colors

Fin: Tomorrow Night Bright (R Classic)

Once the tomorrow-night-bright-r-classic.json file was ready, then it was time to publish the theme to the VS Code Extension Marketplace and then the Open VSX Registry. We added some resources on how to do this below.

Like any other open-source project, this is just the beginning! We’ve optimized the theme for R scripts and many key workbench elements, but there’s more to do. Our next steps will be to optimize the theme for Python scripts, JSON files, and other files supported by RStudio — so those migrating from RStudio to Positron will feel at home in Tomorrow Night Bright. We welcome you to submit a pull request in the GitHub repository or use the files as a reference if you want to create your own Positron theme!

Installing Tomorrow Night Bright (R Classic)

To install the theme in Positron, navigate to the Extensions marketplace by:

• Typing Cmd + Shift + P to access the Command Palette and searching for Extensions: Install Extensions,
• Typing the Extensions shortcut Cmd + Shift + P,
• Or, clicking the button on the left sidebar in Positron.

Search for ‘Tomorrow Night Bright (R Classic)’ and then click Install. Tada you now have our theme installed. We hope you enjoy it!

More resources

The process of building and publishing an extension can be quite involved! We found these links to be particularly helpful:

• VS Code: Your First Extension: This is a primer on how to build an extension from first principles.
• VS Code: Color Theme: This is a primer on how to build color theme extensions, and how color theme extensions are structured.
• VS Code: Theme Color: This is comprehensive documentation on all color settings available in VS Code.
• VS Code: Publishing Extensions: This is a tutorial on how to publish an extension on the VS Code Extension Marketplace.
• VS Code: Extension Manifest: This is detailed documentation on the package.json file in the root folder of all extensions, also known as the ‘extension manifest’ or ‘manifest.’ Our extension’s package.json may be helpful for reference. N.B., the Yeoman utility generates only a bare-bones package.json, but to publish your extension online you’ll need to add a publisher field and more. You will also need to add a package-lock.json file!
• Open VSX: Publishing Extensions: This is documentation on how to publish an extension to the Open VSX Registry.
• HaaLeo/publish-vscode-extension: This is a very helpful GitHub Action, recommended by the Open VSX documentation, that automates publishing your extension in the VS Code Extension Marketplace and the Open VSX Registry. We lightly modified this GitHub Action in our extension: publish-extension.yaml.

Thanks to Mickaël Canouil’s Quarto extension, Preview Color, which allowed us to display colors associated with hex codes in this blog post.