The logo of seruco.io
← Go back

How to Style Roam: The Basics

— By Sebastian Ruhleder

Roam has a clean, minimal interface. It's unobtrusive, and rightfully so. It lets your content speak for itself and does not impose any visual noise upon you. However, if you want to spice up its appearance a bit, Roam offers you an easy yet fairly hidden way to inject your own CSS.

This post will teach you how to start customizing Roam, use different themes, and apply simple styles to your #Tags and [[Links]].

The roam/css Page

To use your own styles, simply create a new page called roam/css. On this page, you can add a CSS code block that is added to Roam's default styles, allowing you to override and customize Roam's UI as you wish.

Here are some tips and caveats:

Using Different Themes

Roam applies all CSS blocks on the roam/css page that are visible. Since Roam allows you to filter for links in block paths, you can define multiple themes for Roam by adding a block with the theme name as a link, followed by an indented CSS code block.

Switching between your themes can then be done by only including the block path that contains the theme you want to use.

Even if you only want to define one theme, it's still a good idea to give it a name. By hiding the block with this name, you essentially deactivate all styles, and Roam returns to its default styling without you losing your theme's styles.

Styling Tags

Roam allows you to use tags to link to pages. A tag is a # followed by the page name. If the page name consists of more than one word, the page name is wrapped in [[ ]]. Roam renders a tag within a <span> and sets its data-tag attribute to the page name. Styling it, therefore, is very easy:

[data-tag="Inbox"] {
background: #EC4646;
color: white;
border-radius: 5px;
padding: 2px 5px;
}

This style will only apply to the #Inbox tag, and it will look like this: #Inbox.

If you want to style all tags at once, you can do so with:

.rm-page-ref--tag {
background: lightgray;
border-radius: 5px;
padding: 2px 5px;
}

This will make all tags look like #This.

Styling Links to Pages

Roam renders links as nested <span>s. The enclosing <span> has its data-link-title attribute set to the page name, but you want to style the inner <span> having the class .rm-page-ref. Doing so is fairly easy:

span[data-link-title^="Inbox"] .rm-page-ref {
background: #EC4646;
color: white;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}

This will make your links to the Inbox page look like this: [[Inbox]].

Using Emojis to Spice Up Your Links

I have a love–hate relationship with emojis. However, they can be a great visual hook to quickly find a tag on a page. To achieve something like this, 🚀#Inbox, you can use:

[data-tag="Inbox Call"]::before {
content: '🚀';
}

Where to Go From Here

The easiest way to find your own ways to customize Roam is to inspect the different elements in Roam with Chrome DevTools (or Firefox Developer Tools) and then using their class names or attributes to style them.

You can also visit Color Hunt to pick some beautiful colors for some of your most important tags and pages. For me, less is more, and I only want to accentuate a few tags throughout my graph.

There is also this post about the best CSS themes for Roam Research by Anne-Laure Le Cunff.