How to Paint Your Tags in Roam Research with CSS

September 28, 2020

One of the amazing things about Roam Research is the ability to customize the user interface of the app.

If you like cotton candy and bright colors, there's a theme for you. If you like minimalistic, sleek design, there's a theme for you too. While there are a plethora of preloaded CSS themes in the Roam community, you probably have unique tags that you use. So, in this quick article, I'll explain how to create custom colored tags in your Roam database.

1. The first thing you need to do, if you haven't already, is create a page called 'roam/css'. Once that's created, go ahead and open it.

2. You should see a code block that's preloaded. If it's not there type "/code" and select the 'Code Block' option.

3. Next, change the code block's code to CSS

4. Copy the code block below and replace the text inside the parentheses with whatever custom tag you want to be colored. It is case sensitive.

span.rm-page-ref[data-tag="REPLACE TEXT HERE"] {
   background: #7CC7DF !important;
   color: white !important;
   padding: 3px 7px;
   line-height: 2em;
   font-weight: 500;
}

5. Underneath that, next to 'background', you can either select the color square and use the color picker to choose the color or write in the hex code of the color you want. This is the button color.

Adobe Color is a great place to look for matching color palettes if you want each color to match.

6. The 'color:' text will change the font color. Again, either select the square or type in a hex code to change the color.

7. The padding, line-height, and font-weight is pretty standard. I would suggest not changing it unless you absolutely want to.

The padding will change how much space there is between the text and the button. The line-heigh will change how big the font is and the font-weight will change how bold the font is. Higher the number, the taller and bolder the text will get.

8. Copy the entire block from 'span' to the '}' that closes the code block. Press return twice and paste the code. Change the tag to the custom tag you want and change the colors as you see fit. Repeat until if you have all the tags you need.

If in a few weeks you want to add a new tag, just copy the last block and do so accordingly.

Best of luck! If you have any questions, message me on Twitter - @daltonmabery

FOOTNOTES