This site runs best with JavaScript enabled.

Painting Roam with Custom CSS

Last tended on May 25, 2020
🌱 Budding

My Roam Garden is a place I spend between 2-4 hours puttering around in every day according to my RescueTime stats RescueTime only tracks the time you're actively focused on a single window, so this measurement has some limitations but sets a nice baseline

A bar graph of the hours I've spent in Roam this week

If I'm staring into something for over twenty hours a week, it better look and feel like beautiful home that fits my aesthetic tastes. As a maker of aesthetically pleasing things, I'm obviously biased towards the Aesthetic Usability Effect

In that spirit, I've gone all-out on customising the CSS that controls how my Roam looks.

A screen capture of my visual styling system in Roam

How to Paint Roam Your Own Colours

Luckily, this is all fairly easy to do.

You first need to install a browser plugin that lets you override the default CSS styles for any website.

Stylus is a great choice and has extensions for both Firefox and Chrome

A screen capture of the stylus interface

They also have good documentation that will walk you through how to use it.

It's good to note that this is not a Roam-specific hack. You can re-paint any webpage you like with a custom CSS styler (go to town on Craigslist!)

Once you've got Stylus working, you can grab my whole Roam theme here on Github

There's also a dark version on that same repo built by my gardening buddy Ian Jones (who has since jumped ship on Roam for Doom Emacs 😜)

If you've never used CSS before, first work through this short course on Khan Academy

It'll take 30 minutes and learning the basics will give you an enourmous appreciation for how the web works (as well as how to control it for your own benefit!)

After that, check out this Google guide to how to look up CSS elements and selectors a live webpage.

Create Custom Styles for Specific Roam Tags and Page Links

Another neat trick I love with CSS and Roam is creating specific styles for different page tags.

I have a little workflow taxonomy going that covers different kinds of output and the stages they flow through

A screencapture of my Roam database with various coloured tags

We're able to do this because when we use a # to create a page tage, Roam adds a 'data-tag' element to the HTML markup.

Shoutout to fellow Roam user Malcolm Ocean who lobbied for this as an official feature of the Roam interface. I found out how to do it digging around in their impressively comprehensive CSS files.

1<span data-tag="Ideas" class="rm-page-ref rm-page-ref-tag">
2 #Ideas What if I learned how to chuck wood
3 like a Chuck Norris woodchuck could?

We can then target this element with a CSS selector that looks like this:

1span.rm-page-ref[data-tag="Ideas"] {
2 color: #FCB815;
3 padding: 3px 4px;
4 font-weight: 700;
5 line-height: 1.4em;

It makes an enormous difference in your user experience to be able to quickly identify different block and note types through visual colour association.

If you just want to grab the data-tag components from my theme , scroll down to the bottom of my CSS theme file to find them.

I also made a short, rough demo video showing exactly how I do this:

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2020