A Holiday RStudio Theme

Yule RStudio ☃️ 🎄 🎁

Follow me  Star yule-rstudio 

🎅 🤶 ’Tis the season to be jolly!

Bring yuletide cheer and seasons greetings to your favorite R IDE. Based on the Yule tmTheme and modified to fit in well with RStudio Dark Mode. It’s surprisingly pleasant and merrily festive!

Featuring magical additions such as a candy cane style line highlight and a blinking Christmas-light cursor:

Installation

You’ll need RStudio version 1.2. Grab the preview version here.

  1. Run the following code in RStudio to download and apply the theme.

    yule_theme <- fs::path_temp("Yule-RStudio", ext = "rstheme")
    download.file("https://git.io/yule-rstudio", yule_theme)
    rstudioapi::addTheme(yule_theme, apply = TRUE)
  2. ☕ Make a cup of hot coco,

    📻 turn on SomaFM’s Christmas Lounge,

    💻 and enjoy coding by the open fire.

Manual Installation

If the steps above don’t work, you can manually download the Yule-RStudio.rstheme file and place it in .R/rstudio/themes in your R home directory (see path.expand("~")). Then, in the RStudio appearance settings, select the Yule RStudio editor theme.

How I Made This

I made this the way I do all web development: right-click on the thing I want to change, choose Inspect Element, and hack at it until it looks reasonable. Somehow this even works in RStudio! (It’s a web app underneath.)

As a starting point, though, I used found the Yule theme on the tmTheme Editor and fiddled with the base colors there until they worked well with RStudio’s blueish dark theme.

The upcoming 1.2 version of RStudio now supports adding themes, and .tmTheme files are converted automatically into RStudio’s .rstheme format. Turns out, an .rstheme is just CSS!

This got me half the way there, but there were still a number of missing elements that I wanted to tweak. Figuring out how tmTheme scopes get mapped to Ace CSS classes was painful trial and error. To get the theme all the way there, I went straight to the source. I opened up a few scripts and R Markdown documents, used Insepect Element to identify the appropriate Ace CSS class, and then fiddled until it looked great good enough.

The blinking Christmas-light cursor is just a CSS animation!

.normal-mode .ace_cursor {
  border: 0!important;
  animation-name: color;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
  opacity: 0.75;
}

@keyframes color {
  0% {
    background-color: #ff00a9;
  }
  20% {
    background-color: #7c3eff;
  }
  40% {
    background-color: #64f3f0;
  }
  60% {
    background-color: #4fe818;
  }
  80% {
    background-color: #ffc400;
  }
  100 {
    background-color: #ff0010;
  }
}