##Fonts Alone Aren't... Enough...!

Last time I searched for fonts that look good with Japanese too, but without color coding, it somehow looks flat 🤔

https://excel2rlang.com/japanese-programming-font-rstats/

Even if fonts are beautiful, nothing starts without proper theme color coding.

Looking at VSCode's official color theme guide, theme development itself isn't that difficult, but unless it's properly configured for each programming language, the theme won't be reflected as expected.

So this time, I decided to create my own theme.

###What Existing Fonts Lack

I compared famous themes and themes I've used in the past, but existing themes each fall short of ideal in small ways like "insufficient color coding" or "pipe and numbers are similar colors with poor visibility."

For reference, I displayed various themes using the following R sample code:

library(palmerpenguins)
library(dplyr)
library(ggplot2)
 
myplot <-
    penguins |>
    group_by(species) |>
    summarise(across(where(is.numeric), mean, na.rm = TRUE)) |>
    print() %>%
    ggplot(aes(
        x = bill_length_mm, y = bill_depth_mm,
        group = species, color = species
    )) +
    geom_point()
 
# normal comment
 
myfunc <- function(var1) {
    #' Squares a number
    #'
    #' Provides the square of the input
    #' @param var1 The value to be squared
    return(x ** 2)
}
 
?myfunc
 
Arrangements <- R6::R6Class(
    c("Arrangements", "iter". "abstractiter"),
    private = list{
        state = NULL
    },
    public = list(
        nextElem = function() {
            out <- self$getnext()
            is.null(out) && stop("StopIteration", call. = FALSE)
            return(out)
        }
    )
)
 
variables[[1]]
a:10
iris |>
    plot()
iris %>% plot()

Since VSCode's R population is small, it's unfortunate, but the themes below should be beautiful enough for popular languages like Java, Python, Javascript, etc.

Aside from the main topic 🌞 I used a VSCode extension called "polacode" to take screenshots this time. There's a similar tool called "Carbon," but "polacode" completes everything within VSCode, so it's very convenient 🚲

##Making the catppuccin Theme R-Compatible

Since creating from scratch is exhausting, I created it based on an existing theme.

I used my current favorite "catppuccin" for the base 🐈

https://github.com/catppuccin/vscode

catppuccin is a theme using warm-tone pastel colors, and color themes are created for various applications beyond VSCode.

It's MIT-licensed open source, so there's no problem with me modifying it. If I have time, I might submit a pull request.

The rightmost "R" is what I made this time.

As I'll write at the end, the theme I created is published on GitHub 😃

https://github.com/snitch0/catppuccin-rstats

###catppuccin-Rstats Highlight Points

By trying various themes, I was able to identify points that needed correction.

First, due to vscode-R extension specifications, special built-in functions like is.null() and plot() are treated differently from regular functions, so existing themes don't give all functions the same highlight. This time, I unified all of them.

Also, I made roxygen2 docs specific to R have special highlighting.

Another highlight point is operators like pipes 🚬 Since pipe is R's identity, I made it a more prominent color ✴️

###How to Make It - Overview

From here, I'll write about how I actually made the theme 🖊️

The orthodox way is to use VSCode's theme template.

npm install -g yo generator-code
 
yo code

Then just follow the instructions to create.

----But,

This time I'm forking catppuccin, so I'll base it on the GitHub repository.

git clone [email protected]:catppuccin/vscode.git

I'll modify Catppuccin-color-theme.json in themes.

VSCode's theme rules are very simple.

"tokenColors": [
    {
        "name": "r operator",
        "scope": "keyword.operator.assignment.r",
        "settings": {
            "foreground": "#89DCEB",
            "fontStyle": "bold"
        }
    }
]

• name is an arbitrary name
• scope is the name of the identifier to assign
• settings determines color and font style (italic, bold)

The rest is manual work of finding each syntax class and coloring it.

###How to Find Syntax Identifier Assignments

The keyword.operator.assignment.r shown in the earlier example is an identifier defined in the vscode-R extension. Specifically, it refers to assignment operators like <- or =.

If you change the color here, you can change only the assignment operator color, but how do you find out about identifier assignments? is the problem 🤔

Actually, VSCode has features that make theme development incredibly easy, so it's super simple 💡

Launch the command palette with Ctrl+Shift+p and start "Developer: Inspect Editor Tokens and Scopes."

And voila! Not only the identifier where you put the cursor, but also the current theme's color codes are properly displayed!! VSCode has incredibly good UI when it comes to its own settings. Love it.

I wrote various R code I could think of to find identifiers, including assignment operators and pipe operators, reserved words, functions, etc., but there were quite a few undefined identifiers including base pipe. If the spirit is "if it doesn't exist, make it," the contribution target in this case would be the vscode-R extension.

###Editing While Checking in Real-Time

VSCode theme editing can open a debug mode with the theme being edited applied, just like VSCode extension development.

Usage is simple. Just press F5.

In the newly opened window, you can preview while editing the theme in real-time.

###Build and Install When Done Editing

Use npm for building.

npm install -g vsce
vsce package

This creates a vsix, then right-click from the explorer pane to install and you're done.

##Finally

So this time I created a VSCode theme myself! It was surprisingly easy 🤘

The theme I created isn't uploaded to the marketplace, but it's on GitHub, so please use it if you like.

https://github.com/snitch0/catppuccin-rstats

See you next time~♪