Split Screen and RTL Custom CSS Scripts for Roam

by | May 3, 2020

NOTE: The following scripts are two separate scripts! They can be used together, but they are still two separate scripts.

One of the great things about using Roam in a desktop setting (instead of mobile) is that there are tons of options for changing the look of it using custom CSS. I’ve seen a few shared screenshots of people using CSS to create a dark mode, add custom colors, and other personal preference options.

I posted a screenshot of the CSS I personally use for Roam and had multiple requests to share it. I thought it others might enjoy it too. Hence this post.

Split Screen CSS

I use the right sidebar to write more than I use the actual main area of Roam. I like that it stays with what you’re writing regardless of what links you click.

As a result, I created this custom CSS to give the sidebar equal width with the main writing area while decreasing the darkness of the background and making the style match more.. In addition, I made the search bar the full width of the work area since I use it non-stop while in Roam

Get the Split Screen CSS file here: Split Screen CSS for Roam

Right to Left CSS

After posting a screenshot using my split screen CSS, I was contacted by someone who asked for help creating CSS to facilitate a right to left language (Hebrew in this case).

My days of being a web designer are many years past but I liked the challenge and thought I’d give it a try. I downloaded the main CSS Roam uses, found all reference to left-margin/left-padding/etc and converted them to their right sided versions while zero-ing out the original left styles. I don’t personally use any right to left languages but it appears that it works well.

Get the Right to Left CSS file here: Right to Left CSS for Roam

Note that these two sets of styles can be combined for a split screen, right to left experience:

How to use custom CSS with Roam

I use two different extensions depending on whether I’m using Safari or Chrome. I prefer Safari because it’s much nicer to my battery, but Roam prefers Chrome.

Adding the CSS files to both are fairly straightforward. The main thing to remember is setting the files to work with Roam by specifying your domain as “https://roamresearch.com/#/”.

Safari: Cascadea

I use the Cascadea app (Cascadea website) from the Apple Store.

When you add a new file to Cascadea, it bring up the following screen. Enter “https://roamresearch.com/#/” to make it work with Roam.

Chrome: Stylus (beta)

I’m using the Stylus (beta) extension from the Chrome web store located here: Stylus (beta) extension.

On the edit page for your CSS, make sure to set up the CSS to apply to “https://roamresearch.com/#/” as follows:

Share Your Screenshots

Would love to see people share their screenshots on social media with the hashtag #roamcss. Curious what other people are rocking when in Roam.