Roam Research Docs · Developer documentation
{{[[roam/css]]}} component block
?disablecss=true to the URL (before the #) — all roam/css is disabled until the next refresh. You can also disable all js and css from the "Roam Depot" tab in settings
setTimeout(() => { debugger }, 3000) in the DevTools console, then hover the element — the page freezes in the debugger so you can inspect it
rm- (a few older structural ones use roam-)
bp3- classes come from Blueprint, the UI library Roam uses — you can target them too, but prefer rm- classes when both match
document.querySelectorAll(".rm-page-ref") returns every element it matches
.roam-body, .roam-app, .roam-main — the app shell
.roam-article — the main window's page content
.roam-sidebar-container — the left sidebar
.rm-sidebar-outline — a page open in the right sidebar
.roam-log-container — the daily notes view
.rm-title-display — page titles
.rm-block (also .roam-block-container) — a block together with its children
.rm-block-main (also .rm-block__self) — just the block's own line
.rm-block__children — the block's children
.rm-block__input (also .roam-block) — the rendered block text; while editing it is the textarea.rm-block-input
.rm-block: rm-heading-level-1 / -2 / -3, rm-block--open / rm-block--closed, rm-block--mine / rm-block--others, rm-block--editable / rm-block--readonly, rm-focused
.rm-page-ref — every page reference
.rm-page-ref--link for bracketed links, .rm-page-ref--tag for tags
.rm-block-ref — block references
.rm-reference-main — the linked references section (query results use it too)
data-tag (tags) or data-link-title (links), plus data-link-uid
data-page-links — a JSON array of every page linked in the block — and data-path-page-links for pages linked in its ancestors
#.aside. The tag will be automatically be hidden and appear on hover.
.rm-block container
data-block-uid, data-page-title, and data-create-display-name / data-edit-display-name
.roam-app {
font-family: "iA Writer Quattro", "Helvetica Neue", sans-serif;
}@import (e.g. a Google Fonts URL or a shared theme stylesheet) only works from the very first css block on this page — all blocks are concatenated into one stylesheet, and css requires @import at the top. Hosting a long theme on GitHub and importing it also keeps those lines out of your graph's search results
/* the width setting in the ... menu adds rm-spacing--small or --medium here */
.rm-article-wrapper.rm-spacing--small {
padding-left: calc((100% - 1100px) / 2);
padding-right: calc((100% - 1100px) / 2);
}/* the > path matters: a plain descendant selector would also hit the heading's child blocks */
.rm-heading-level-1 > .rm-block-main .rm-block__input { color: #1c5b8f; }
.rm-heading-level-2 > .rm-block-main .rm-block__input { color: #2e7d32; }
.rm-heading-level-3 > .rm-block-main .rm-block__input { color: #8a6d1d; }/* an emoji before every #idea tag */
.rm-page-ref[data-tag="idea"]::before {
content: "💡 ";
}
/* style every tag starting with "project/" */
.rm-page-ref[data-tag^="project/"] {
color: #7b2d8b;
font-weight: 600;
}span[data-link-title="Projects"] {
font-weight: 600;
text-transform: uppercase;
}/* highlight every block that links [[urgent]] */
.rm-block[data-page-links*='"urgent"'] > .rm-block-main {
background: #fff6f6;
}#.aside #.aside
/* tag a block with #.aside to style it */
.rm-block.aside > .rm-block-main {
opacity: 0.6;
font-style: italic;
}
/* hide the #.aside tag itself */
.rm-page-ref[data-tag=".aside"] {
display: none;
}/* {{[[TODO]]}} renders .rm-checkbox.rm-todo, {{[[DONE]]}} renders .rm-checkbox.rm-done */
/* the native input is hidden — the visible box is the .checkmark inside .check-container */
.rm-checkbox .check-container {
display: inline-block;
transform: scale(1.15);
transform-origin: center left;
}
/* cross out blocks with a checked box (needs a browser with :has support) */
.rm-block__input:has(.rm-done) {
text-decoration: line-through;
opacity: 0.6;
}/* ^^highlighted^^ text */
.rm-highlight {
background: #d8f0e0;
}/* blocks starting with > */
blockquote.rm-bq {
border-left: 3px solid #c9b458;
background: #faf6ea;
font-style: italic;
}/* [alias](url) links to the outside world get an arrow */
.rm-alias--external::after {
content: " ↗";
font-size: 0.8em;
}.rm-inline-img {
max-height: 300px;
}/* define your colors twice and the theme switches with the OS setting */
@media (prefers-color-scheme: dark) {
.roam-app { background: #1d2125; color: #d6d8da; }
}
@media (prefers-color-scheme: light) {
.roam-app { background: #ffffff; color: #202b33; }
}rm- classes and data attributes; avoid structural selectors like :nth-child if you can
!important to the declaration