| color | setting | scope |
|---|---|---|
| #3e999f◉ | foreground | meta.diff.range |
| #4271ae◉ | background | meta.diff.header.to-file, meta.diff.header.from-file |
| #6699cc◉ | foreground | entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter |
| #66cccc◉ | foreground | keyword.operator, constant.other.color |
| #718c00◉ | foreground | markup.inserted.diff, meta.diff.header.to-file |
| #999999◉ | foreground | comment |
| #99cc99◉ | foreground | string, constant.other.symbol, entity.other.inherited-class, entity.name.filename, markup.heading, markup.inserted.git_gutter |
| #99cccc◉ | background | meta.separator |
| #cc99cc◉ | background | invalid.deprecated |
| #cc99cc◉ | foreground | keyword, storage, storage.type, entity.name.tag.css |
| #cccccc◉ | foreground | keyword.operator.class, constant.other, source.php.embedded.line |
| #cdcdcd◉ | foreground | invalid, meta.separator, invalid.deprecated |
| #f2777a◉ | background | invalid |
| #f2777a◉ | foreground | variable, support.other.variable, string.other.link, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter |
| #f99157◉ | foreground | constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit |
| #ffcc66◉ | foreground | entity.name.class, entity.name.type.class, support.type, support.class |
| #ffffff◉ | foreground | markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.to-file, meta.diff.header.from-file, meta.diff.header.from-file |
| #c82829◉ | foreground | markup.deleted.diff, meta.diff.header.from-file |
My favorite RStudio theme
My favorite color theme in RStudio has always been Tomorrow Night Eighties. I was drawn in by the way the colors play off the muted, dark grey background as opposed to the traditional stark black background of most dark mode themes. It reminds me of a muted neon sign vibe, like I’m approaching the entrance to an elaborate arcade rather than coding coefficients. I’ve been using it ever since I began learning R about 4 years ago and I don’t see a need to leave the arcade any time soon. Tomorrow Night Eighties is included as a default color theme in RStudio and was originally written by Chris Kempson as one of the variants in the MIT-licensed Tomorrow theme series.
Below is an example script in RStudio with the Tomorrow Night Eighties theme enabled showing off a variety of R code elements. The muted background and color palette make it easy to focus on the code without being distracted by the interface.
Please note that I, like Isabella, have rainbow parentheses enabled in RStudio. Rainbow parentheses follow their own color palette developed in R, independent from the theme itself. I also have rainbow fills enabled, which is an option under indentation guides in RStudio’s global options. Rainbow fills follow the same color palette as rainbow parentheses.
The problem
When I moved over to Positron, I went looking for Tomorrow Night Eighties and what I found was… hard on the eyes. Microsoft’s port of Tomorrow Night Eighties theme has workbench or chrome elements that match the RStudio editor color scheme pretty well, however the R syntax highlighting is far from ideal if red and orange aren’t your favorite colors. Here is what the same R script looks like in Positron with Microsoft’s port of Tomorrow Night Eighties enabled:
It looked nothing like the aesthetically pleasing theme I was used to, suffering from the same excessive amount of syntax highlighting and an especially distracting use of red and orange that Isabella saw in the Tomorrow Night Bright port. So I decided to write my own.
Inspiration
After being disappointed by the Tomorrow Night Eighties option in Positron I came across Isabella Velásquez’s post detailing her similar struggle with the Tomorrow Night Bright theme when adopting Positron and how she went about making her own VS Code color theme extension. With the help of her post I was inspired to write my own theme extension of Tomorrow Night Eighties, because Positron and VS Code users deserve to
I’m pleased to announce that the resulting extension ‘Tomorrow Night Eighties (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:
Creating a VS Code color theme extension
Here I followed Isabella’s instructions for creating a VS Code color theme extension, which are detailed in her post. I won’t go into the details here, but I will say that it was a fun and educational experience. This was my first extension, and I’m excited to share my work with the community.
The only things I changed in this section were, of course, the title of the extension and the Tomorrow Night Eighties’ URL to import an existing theme and inline it in the Visual Studio Code color theme file.
I will add Positron’s and VS Code’s [Extension Development Host] feature (open the folder in Positron and press F5) to my list of favorite features, as it made testing the extension a breeze. I was able to make changes to the theme file and see them reflected in the host window without having to reload the entire application.
Customizing the extension
While the dated grey/blue workbench elements of the Microsoft port of Tomorrow Night Eighties fit my theme much better than Tomorrow Night Bright, I wanted to make the workbench elements match the muted grey background of the RStudio editor.
I also wanted to make the syntax highlighting more similar to RStudio’s Tomorrow Night Eighties theme, which meant changing the colors of some of the syntax elements. I was able to do this by modifying the tokenColors section of the theme file.
I also have rainbow parentheses enabled by default within the theme.
Editor Colors
Below are the editor (syntax highlighting) colors from the two theme JSON files: the pristine Yeoman import of the original Tomorrow-Night-Eighties.tmTheme, which is exactly what Microsoft’s port ships, and the customized Tomorrow Night Eighties (R Classic) theme.
| color | setting | scope |
|---|---|---|
| #3e999f◉ | foreground | meta.diff.range |
| #4271ae◉ | background | meta.diff.header.to-file, meta.diff.header.from-file |
| #6699cc◉ | foreground | entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter, punctuation.definition.begin.frontmatter, punctuation.definition.end.frontmatter, punctuation.definition.markdown, markup.fenced_code.block.markdown, fenced_code.block.language.markdown, fenced_code.block.language.attributes.markdown, markup.heading.heading-0.asciidoc, heading.6.markdown punctuation.definition.heading.markdown, heading.6.markdown, heading.6.quarto punctuation.definition.heading.quarto, heading.6.quarto, markup.heading.atx.6.mdx, markup.heading.atx.6.mdx punctuation.definition.heading.mdx, markup.heading.setext.6.mdx |
| #66cccc◉ | foreground | keyword.operator, constant.other.color, punctuation.separator.map.value.yaml, markup.heading.heading-0.asciidoc, heading.5.markdown punctuation.definition.heading.markdown, heading.5.markdown, heading.5.quarto punctuation.definition.heading.quarto, heading.5.quarto, markup.heading.atx.5.mdx, markup.heading.atx.5.mdx punctuation.definition.heading.mdx, markup.heading.setext.5.mdx |
| #718c00◉ | foreground | markup.inserted.diff, meta.diff.header.to-file |
| #999999◉ | foreground | comment |
| #99cc99◉ | foreground | string, constant.other.symbol, entity.other.inherited-class, entity.name.filename, markup.heading, markup.inserted.git_gutter, markup.heading.heading-0.asciidoc, heading.4.markdown punctuation.definition.heading.markdown, heading.4.markdown, heading.4.quarto punctuation.definition.heading.quarto, heading.4.quarto, markup.heading.atx.4.mdx, markup.heading.atx.4.mdx punctuation.definition.heading.mdx, markup.heading.setext.4.mdx |
| #99cccc◉ | background | meta.separator |
| #cc99cc◉ | background | invalid.deprecated |
| #cc99cc◉ | foreground | keyword.other.unit, keyword, storage, storage.type, string.other.link.title.quarto, markup.heading.heading-0.asciidoc, heading.7.markdown punctuation.definition.heading.markdown, heading.7.markdown, heading.7.quarto punctuation.definition.heading.quarto, heading.7.quarto, markup.heading.atx.7.mdx, markup.heading.atx.7.mdx punctuation.definition.heading.mdx, markup.heading.setext.7.mdx |
| #cccccc◉ | foreground | keyword.operator.class, constant.other, source.php.embedded.line, string.unquoted.plain.out.yaml, variable.object, variable.parameter, variable.css, meta.property-list.css, source.css, entity.name.tag.css, variable.argument.css |
| #cdcdcd◉ | foreground | invalid, meta.separator, invalid.deprecated |
| #f2777a◉ | background | invalid |
| #f2777a◉ | foreground | variable, support.other.variable, string.other.link, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter, heading.1.markdown punctuation.definition.heading.markdown, heading.1.markdown, heading.1.quarto punctuation.definition.heading.quarto, heading.1.quarto, markup.heading.atx.1.mdx, markup.heading.atx.1.mdx punctuation.definition.heading.mdx, markup.heading.setext.1.mdx, markup.heading.heading-0.asciidoc |
| #f99157◉ | foreground | constant.numeric, constant.language, support.constant, constant.character, punctuation.section.embedded, keyword.other.unit, markup.heading.heading-0.asciidoc, heading.2.markdown punctuation.definition.heading.markdown, heading.2.markdown, heading.2.quarto punctuation.definition.heading.quarto, heading.2.quarto, markup.heading.atx.2.mdx, markup.heading.atx.2.mdx punctuation.definition.heading.mdx, markup.heading.setext.2.mdx |
| #ffcc66◉ | foreground | entity.name.namespace.r, entity.name.class, entity.name.type.class, support.type, support.class, markup.heading.heading-0.asciidoc, heading.3.markdown punctuation.definition.heading.markdown, heading.3.markdown, heading.3.quarto punctuation.definition.heading.quarto, heading.3.quarto, markup.heading.atx.3.mdx, markup.heading.atx.3.mdx punctuation.definition.heading.mdx, markup.heading.setext.3.mdx |
| #ffffff◉ | foreground | markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.to-file, meta.diff.header.from-file, meta.diff.header.from-file |
| #c82829◉ | foreground | markup.deleted.diff, meta.diff.header.from-file |
Workbench Colors
And here are the workbench (chrome) colors. Note that the Microsoft port is a .tmTheme file, which only defines editor token colors, so its only workbench colors are the handful of editor.* settings Yeoman derived from the theme when importing it; everything else falls back to the base dark theme.
| color | setting |
|---|---|
| #2d2d2d◉ | editor.background |
| #393939◉ | editor.lineHighlightBackground |
| #515151◉ | editor.selectionBackground |
| #6a6a6a◉ | editorWhitespace.foreground |
| #cccccc◉ | editor.foreground |
| #cccccc◉ | editorCursor.foreground |
| color | setting |
|---|---|
| #00bdce◉ | editorBracketHighlight.foreground5 |
| #2d2d2d◉ | editor.background |
| #33c192◉ | editorBracketHighlight.foreground4 |
| #393939◉ | editor.lineHighlightBackground |
| #3c3c3c◉ | statusBar.background, statusBar.noFolderBackground |
| #515151◉ | editor.selectionBackground |
| #6699cc◉ | activityBarBadge.background |
| #6a6a6a◉ | editorWhitespace.foreground |
| #6e768166◉ | statusBarItem.prominentBackground |
| #94a9ec◉ | editorBracketHighlight.foreground6 |
| #99b657◉ | editorBracketHighlight.foreground3 |
| #cccccc◉ | editor.foreground, editorCursor.foreground |
| #d3a263◉ | editorBracketHighlight.foreground2 |
| #da3633◉ | statusBar.debuggingBackground |
| #dc91db◉ | editorBracketHighlight.foreground7 |
| #e6edf314◉ | statusBarItem.hoverBackground |
| #e6edf31f◉ | statusBarItem.activeBackground |
| #ed90a4◉ | editorBracketHighlight.foreground1 |
| #ffffff◉ | statusBar.debuggingForeground |