Roam Research Docs · Developer documentation

roam/css

• 🚧🚧🚧🚧🚧🚧 Under Construction 🚧🚧🚧🚧🚧🚧

Use roam/css to create themes, change layouts, develop new features, and style blocks at a granular level

Check out our [community-built themes for inspiration](Themes)

Getting started::

Create a page in your graph with the title roam/css

• Press cmd+u (mac) or ctrl+u (pc) and then start typing "roam/css" into the search bar, then press return (mac) enter (pc)
• Or
• Type "roam/css" into a block

Create a CSS code block on the roam/css page

• Type "/" into any block on the page then type "CSS", and then press enter or return
• Or
• Type "`" into any block, which

Crea

How-to guides::

• How to use roam/css inline
• How to create custom tags
• How to make page tags
• How to do block-level customization
• How to style the Graph Overview
  • {{roam/css}}
    • You can also set these on :root since they cascade

    • #rm-canvas-container {
        background-color: lightblue;
        --graph-overview-label-font: Times New Roman;
        --graph-overview-label-color: gray;
        --graph-overview-default-node-color: #673AB7;
        --graph-overview-unselected-node-color: #673AB772;
        --graph-overview-explore-node-color: pink;
        --graph-overview-default-edge-color: #FFC107B5;
        --graph-overview-selected-edge-color: black;
        --graph-overview-unselected-edge-color: white;
      }

Examples::

• Code samples:

Resources::

Community Videos::

How to Create and Edit Roam CSS: Interview with Abhay Prasanna

• {{video: https://www.youtube.com/watch?v=Cz07-oZlPzA&t=3s&ab_channel=MikeGiannulis}}

Articles::

• Painting Roam with Custom CSS by Maggie Appleton
• Roam themes: how to style Roam Research with custom CSS by Anne-Laure Le Cunff

Reference::

• Selectors:
• Graph-wide CSS

  • .rm-sidebar-outline > div:nth-child(1) {
      margin-bottom: 16px;
    }

markdown version · view in Roam Research · exported 2026-07-03