Don't like the design of Roam Research? Learn how to change it to your liking using CSS.
Roam Research is highly customizable, both via JavaScript extensions that add functionality and snippets of CSS that let you change Roam's design. If you don't like Roam's design that it ships with, this article is a must-read.
There are two ways to add CSS to Roam:
Directly on the roam/css page
The simplest way to add CSS is via the roam/css page, which you can create by entering roam/css in the top search bar and hitting Enter.
Once on the CSS page, you can create a new CSS block by typing /css and hitting Enter. Next, paste the CSS snippet in the code block and click away from it to load the CSS.
To make sure everything is properly loaded, refresh Roam.
Using the roam/css shortcode
You can also add custom CSS to your graph from other places than the roam/css page. For this you'll need to add the following shortcode to a block:
{{[[roam/css]]}}Hit Enter and Tab to nest a block underneath the shortcode (making it a child block). Next, type /css and hit Enter again.
Paste the CSS snippet in the code block and click the red Yes button underneath the question 'Do you want to apply the CSS code blocks nested here?'. The CSS code is now loaded.
To make sure everything is properly loaded, refresh Roam.
Things to keep in mind
You cannot break anything in Roam by adding CSS. If something does break, remove the CSS code or block, or switch it to another language than CSS.
Still, to ensure a proper working (and understanding) of how CSS is loaded in Roam, keep these things in in mind:
The roam/css page is loaded from top to bottom
Like any CSS on the web, the CSS snippets on the roam/css page are also loaded from top to bottom. That means that a snippet at the bottom of the page can overwrite a snippet that's at the top.
CSS blocks nested underneath the roam/css shortcode are loaded last
The best practice is to add all your custom CSS on the roam/css page. Not only will this help you keep track of all the custom code you've added to your graph, it's also the page where Roam looks first for any custom code.
When you do use the {{[[roam/css]]}} shortcode in your graph, keep in mind that this will be loaded last. This is important as what's loaded last can overwrite anything that's loaded before.
As an example: if you have a theme installed on the roam/css page with a custom font, but you've added another font using the {{[[roam/css]]}} shortcode, the font from that shortcode is loaded and not the one from the custom theme.
Where to find custom CSS for Roam
If you want to use a beautiful theme that's easy to customize, you definitely need to check out the Roam CSS System by Alexander Rink. It comes with detailed documentation to shape the theme to your liking.
Another theme builder is Abhay Prasanna, who runs a GitHub repository with a breadth of different themes. Abhay is also the creator of the popular rainbow indent feature:
Want to have a horizontal sidebar rather than a vertical one? Then check out one of Azlen Elza's themes:
Last but not least, the Roam Research team maintains a list of themes and other CSS customizations in the official help graph.
Join the conversation.