Painting Roam Research with Custom CSS

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

I've used colors and font weight to distinguished internal from external links, added custom colors to particular page names, and shifted the contrast and spacing of elements to fit my own design aesthetic.

Luckily, this is all fairly easy to do. Roam has a built-in system for customising how your database looks.

You first need to create a new page called roam/css.

Once there, create a new code block by typing /code and selecting the block option.

Once the code block appears, set the language to css from the right-hand drop down menu.

You're now ready to start customising the CSS of your Roam. Any CSS you enter into this new code block will be applied across your whole database.

To test if it's working, type h1.rm-title-display span { color: salmon;} into the box.
The title of your new page should change to a lovely shade of salmon.

Pre-made Roam Themes

For those of you entirely uninterested in learning CSS who just want to pop a pre-made theme in, Roam has a whole collection of you can pick from.

Copy and paste any of them into your new roam/css page and the styles will be applied across your whole database

If you want to use my theme Leyendecker, the most up-to-date version is available this . There's a older version listed on the .

Custom Styling Tags and Page Links

Another neat trick I love with CSS and Roam is creating specific styles for different page title and tags. . I have a little workflow taxonomy going that covers different kinds of output and the stages they flow through

We're able to do this because when we use the double bracket or add a # to create a page tag, Roam adds a new attribute to the HTML markup. If the page is made with a #, it adds a data-tag attribute. If it's made with double brackets Roam adds a data-link-title attribute

We can then target both of those attributes with a CSS selector that looks like this:

The first selector, span.rm-page-ref[data-tag="Ideas"] changes any # link, and the second span[data-link-title^="Tweet"] .rm-page-ref selector changes any link made with [ [ brackets]

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

If you just want to grab the tag and page styles from my theme , scroll down to the bottom of my CSS theme file to find them.

Block Level Styling

Roam also allows you to style whole blocks based on tags. In my database I use this heavily when taking book notes to visually distinguish between claims, responses, questions, and evidence.

To style an entire block, and all its child elements, we use:

To style only the child elements but not the parent, add .rm-block-children to the end use:

To style just the block itself but none of the child elements, add > div.rm-block-main on:

If you don't want to use the native Roam CSS functionality, there's a way to apply custom CSS styles to any website using a browser plugin.

This is especially useful if you're part of a multi-player Roam where everyone has their own styling preferences. has extensions for both and that allow you to write your own CSS styles in a browser.

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!)