If you've gone spelunking in RStudio's Global Options, you've probably found the appearance tab which lets you customize your editor theme among other things. When I initially discovered this, I was maddened that none of my profs had ever brought it to my attention and were gleefully letting me burn my retinas out with RStudio's default white configuration (is it statistics or sadistics?). One thing I did notice immediately, however, was that not all editor themes are created equal. Some look pretty decent, "Pastel on Dark" looks decent to me eyes: Some, though, I am physically repulsed by (sorry if this is your go-to):
One Solution (Darkstudio):
It seems that no matter what type of dark editor theme you have, those blue-grey UI elements are there to stay... or at least that's what I had assumed until I did some digging! Turns out, there exists a package that changes the game: Darkstudio. Rather than try to explain how it works (we'll get to that), here's what it does:
Since there's no hue of any color, I personally found Darkstudio to be a very compelling option. Install from Github and it's very easy to use, though sometimes unintuitive. For example, after activating the theme, nothing appears to happen. You have to quit RStudio and then re-open to have it show up. But, after you activate it the first time, you never have to do it again so all is forgiven! Set it once, and leave it. Nice!
Further Customization:
But what if you wanted an aesthetic a little more personal to you? While Darkstudio successfully expands RStudio's theme count to four (Modern, Sky, RStudio's Dark, Darkstudio), surely we can't all fit in those boxes neatly. Since I'm a vampire, there's only two options to begin with! Good news again, it can most certainly be done:
What is this wizardry? If you're serious about doing something like the above (because you deserve it), we'll have to take a little dive into how Darkstudio is set up. But!
Since I'm relatively new to the world of package building, CSS, HTML, etc., an obligatory "this may not technically be correct, but should get the point across" warning applies going forward. If I did make a mistake, please let me know at catlin@hey.com - I'd appreciate it!
I was curious to find out that RStudio functions much like a web browser, and even uses the Google Web Toolkit (GWT)! As such, you can inspect nearly every part of its appearance as you would if you wanted to look at the HTML of a webpage. Simply right-click pretty much anywhere on RStudio, and hit "Inspect Element" and RStudio DevTools will appear. Neat!
On the right hand side, you'll notice a "Styles" tab which is where we get into the fun stuff. For example, I want to change the color of the toolbar highlighted above. If I scroll down to a section with a background or background color argument and choose a different color, bam! Take a look:
It won't stay like this once I close this RStudio session (which is a good thing because it looks bad, bad, not good), but illustrates the concept of what we can do. As you can imagine, it would be pretty tedious to go through and find the associated tags for each item you want to change - and that doesn't even cover how to get it to stick. If you're overwhelmed by the above, know that so am I. Luckily, Darkstudio is there for us!
What Darkstudio does, in as simple as I can write, is it edits the .htm file that renders RStudio's browser to make a call to a custom CSS file (Cascading Style Sheets) with all of the color/font changes Darkstudio makes. Since that CSS file is readily available to us, we can go in and edit it, replacing colors as we please!
Here's a link to a modified darkstudio.css that I've made comments in to help understand what does what. Most everything you'll want to change is right there at the top:
:root {
--ds-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
--ds-ui-bg: #2c2c2c; /* main borders */
--ds-ui-font-fg: #ffffff; /* not exactly sure */
--ds-ui-divider-bg: #2c2c2c; /* dividers in middle */
/* and so on, I want to make this post readable */
}
So, for example, if I wanted to change the color of the main borders, I would change the #2c2c2c next to --ds-ui-bg to a hex code of my choosing like #4287f5. Then I'd make my way down the list! The simplest way (but not the best way) to have your edited CSS file come to life is to make sure Darkstudio is activated with darkstudio::activate(). After that, you can close RStudio. Then navigate to
Note that the folder hierarchy will be different for Windows and Linux PC's but it'll be in roughly the same place. From here, replace the existing darkstudio.css with your modified one. Then, once you boot up RStudio, any changes you made in the darkstudio.css file will show up! Here's the main border color edit mentioned above:
A couple caveats here:
Because RStudio's CSS is generated by GWT, updates to RStudio tend to break things. I've been bringing these issues up on the Darkstudio Github. They're mostly easy fixes and I'll try to keep the CSS I linked above up to date though.
One of the larger issues I discovered was in relation to the Data Viewer window, which involves basically the same as above in a different place. Here's how to fix it.
Your editor theme must be dark, unless you want to rewrite a fair chunk of that CSS file.
Ah, but speaking of editor themes, the above does pretty much everything but that. Making your own editor theme is much more widely documented, I'd recommend reading this article from the folks at RStudio. After you've generated your tm theme using this tm theme editor, simply add it to RStudio:
rstudioapi::addTheme("path to your tm theme")
rstudioapi::applyTheme("theme name")
You can also do that by going to the Appearance tab in the Global options.
Thanks for Reading!
I know this was a long post; I've tried to be as concise as I can while still enjoying the sound of these words in my head. To be fair to me, this is quite the task to accomplish as just the code bits are complex enough. Creating your own cohesive, aesthetically-pleasing theme also takes quite the amount of time. In the end, though, I find a large amount of joy knowing that only myself (and a special someone) are using the theme found above. If you clone it, I will find you :)
I have this whole procedure taken care of inside of a spiritual "fork" of Darkstudio. I'd be happy to explain how to implement the above more cleanly, or help out it you're having trouble following my steps here!
