Roam Research Docs · Help & user documentation

Themes

markdown version · view in Roam Research

Applying Custom Themes to your Graph by Conor White-Sullivan

{{video: https://youtu.be/UY-sAC2eGyI }}

Older out of date themes (may or may not work right)

Railscast

Screenshots::
Github Link:: https://github.com/jmharris903/Railscast-for-Roam-Research-Theme
Designer::
- Jeff Harris
  - Twitter:: @jeffharrissays
Love this theme? Say thanks via Cash App or paypal

Special Features::

Robust variables for customization


:root {
  /* Roam default variables */

  --primary-color: #137cbd;
  --s1: 8px;
  --background-color: #e1e8ed;

  /* Primary fonts */

  --main-font: 'Inter', sans-serif;
  --main-font-color: #999;
  --main-font-size: 14px;
  --code-font: 'Source Code Pro', 'Courier New', Courier, monospace;
  --code-font-color: #6d9cbe;
  --code-font-size: 0.9rem;
  --caret-color: #0080ff;

  /* Fonts */

  --alias-bg: transparent;
  --alias-font-color: #fecf2b;
  --attr-font-color: rgba(17, 137, 189, 0.65);
  --block-ref-bg: none;
  --block-ref-border: rgba(254, 207, 43, 0.6);
  --block-ref-font-size: 1em;
  --block-ref-hover: #eb9854;
  --block-ref-hover-bg: #111;
  --breadcrumb-bg: transparent;
  --breadcrumb-color: #5c7080;
  --breadcrumb-font-size: 13px;
  --breadcrumb-line-height: 0.85em;
  --calculation-color: #ff6000;
  --db-menu-bg: #333;
  --db-menu-border: #3d3d3d;
  --db-menu-header: #5c7080;
  --db-menu-item: #eb9854;
  --db-title-font-color: #eb9854;
  --db-title-hover: rgba(167, 182, 194, 0.3);
  --dialog-bg: #333;
  --dialog-font-color: #eee;
  --emphasis: #fc5963;
  --external-link-color: #8dbb40;
  --h1-font: var(--main-font);
  --h1-font-color: #1189bd;
  --h1-font-size: 2.25em;
  --h1-font__link--color: var(--page-link-color);
  --h2-font: var(--h1-font);
  --h2-font-color: #1189bd;
  --h2-font-size: 1.625em;
  --h2-font__link--color: var(--page-link-color);
  --h3-font: var(--h1-font);
  --h3-font-color: #1189bd;
  --h3-font-size: 1.2rem;
  --h3-font__link--color: var(--page-link-color);
  --hashtag: #e9892475;
  --highlight-background-color: #008aff5e;
  --highlight-font-color: #bbb;
  --highlight-link-color: #ff6000;
  --left-sidebar-font-color: #1189bd;
  --left-sidebar-font-color-hover: #e98924;
  --left-sidebar-font-size: 1rem;
  --left-sidebar-shortcuts-color: var(--left-sidebar-font-color);
  --left-sidebar-shortcuts-font-size: 1rem;
  --left-sidebar-shortcuts-title-color: var(--left-sidebar-font-color);
  --page-brackets: rgba(228, 124, 67, 0.25);
  --page-link-color: #eb9854;
  --page-link-namespace-color: #ebd454;
  --popover-font-color: #e98924;
  --popover-bg: #333;
  --ref-count-font-size: 0.8em;
  --right-sidebar-font-color: var(--main-font-color);
  --right-sidebar-link-color: #eb9854;
  --right-sidebar-bg: #323232;
  --right-sidebar-masonry-bg: var(--body-bg);
  --right-sidebar-masonry-outline: #3d3d3d;
  --right-sidebar-section-border-color: #e9892475;
  --search-bg: #252525;
  --search-body-font-color: #8a9ba8;
  --search-font-color: #af671c;
  --search-new-page-color: #8dbb40;
  --search-outline: #e9892475;
  --search-selected-row: #4c4c4c;
  --strong: #508bb5;
  --tag-font-color: #777;
  --tag-font-color-hover: #fff;
  --tag-hover-bg: #e98924;
  --tag-padding: 0.071428571em 0.428571429em 0.214285714em;
  --tag-radius: 2em;

  /* Backgrounds and objects */

  --block-highlight: #00588e;
  --block-highlight-current: rgba(255, 255, 255, 0.05);
  --block-highlight-bg: #312c28; // This is the Mentions background highlight color
  // --body-bg: #232323;
  --body-bg: #2c2c2c;
  --bullet: rgba(225, 117, 28, 0.3);
  --bullet-closed: rgba(225, 117, 28, 1);
  --bullet-closed-right-sidebar: var(--bullet-closed);
  --bullet-outline: #404040;
  --bullet-outline-highlight: #ff9500;
  --bullet-outline-hover: #ff9500b3; //recommend this be 70% of --bullet-outline-highlight
  --bullet-position: 4px;
  --bullet-version: #137cbd;
  --checkmark-border: #137cbd;
  --checkmark-bg: #555;
  --checkmark-color: #137cbd;
  --code-bg: #002b36;
  --datepicker-bg: transparent;
  --datepicker-day-wrapper: #d9822b7a;
  --datepicker-font-color: var(--popover-font-color);
  --datepicker-select-bg: #444;
  --hr: rgba(225, 117, 28, 0.5);
  --icon-bg-hover: rgba(167, 182, 194, 0.3);
  --icon-color: #e78924;
  --icon-color-hover: #e78924;
  --inline-search-bg: #333;
  --inline-comment-bg: transparent;
  --inline-comment-bg-hover: var(--reference-item-bg);
  // --left-sidebar-bg: #2b2b2b;
  --left-sidebar-bg: #323232;
  --left-sidebar-hover-bg: #1f1f1f;
  --reference-item-bg: #d8ac6e1a; // JH: Railscast uses 1 semi-transparent color for all three bg values
  --reference-item-bg-2: #d8ac6e1a;
  --reference-item-bg-3: #d8ac6e1a;
  --section-border-color: #e9892475;
  --select-bg: #232323;
  --topbar-bg: var(--body-bg);
  --topbar-border-color: #333;

  /* Misc */

  --pages-delete-bg: #222; // modal variable
  --pages-delete-border-color: #d8e1e8; // JH: modal variable, New variable TODO add to body .delete-all-dialog-items
  --pages-header-row-bg: #262626;
  --pages-header-row-font-color: #bfccd6;
  --pages-mentions-bg-empty: #3a3a3a;
  --pages-mentions-color: #ff6000;
  --pages-mentions-color-empty: #737373;
  --pages-row-highlight: #292929;
  --pages-search-bg: #3a3a3a;
  --pages-search-outline: #e9892475;
  // --pages-search-outline: var(--search-outline); //no longer exists in Roam, add if needed for Theme or replace with inherit or initial?
  --pages-table-border: #2f373d;
  --pages-sorted-color: #508bb5;

  --table-border: #444;
  --table-font-size: 0.85rem;

  --kanban-board-bg: #333333;
  --kanban-card-bg: #555555;
  --kanban-card-font-color: #6d9cbe;
  --kanban-column-bg: #454545;
  --kanban-column-font-color: #e98924;

  --encrypted-font-color: #ff6000;
  --encrypted-bg: #222;

  --pomodoro-bg: transparent;
  --pomodoro-color: #fc5963;
  --pomodoro-border: #fc596370;

  --blockquote-font-color: rgba(109, 156, 190, 0.89);
  --blockquote-font-size: 14px;
  --blockquote-border-color: #30404d;
  --blockquote-bg: none;
  --blockquote-cite: #777;

  --emoji-bg: #2d2d2d;
  --emoji-border: rgba(225, 117, 28, 0.4);
  --emoji-color: #aaa;

  --no-query-results: 'Query returned no results';
  --no-query-results-color: #fc5963;
  --query-results-border: #f2c98f1a;

  --q1: #50b2c0;
  --q2: #c5d86d;
  --q3: #ff6b6b;
  --q4: #ca7d4a;

  /* Scrollbar settings - to disable set values to none */

  --scrollbar-thumb: #323232;
  --scrollbar-track: rgba(153, 153, 153, 0.1);

  /* Saving icon colors */

  --saving-local: #99280f;
  --saving-remote: #d9822b;
  --synched: #0f9960;

Customize query display
- MINIMIZE QUERIES: add any one of the following tags before the beginning of your query (in the same block): #min-title = hides the page reference link / page title #min-con = hides the contextual reference information (breadcrumbs) #minimal = hides both the title and the context #min-q = hides the query string, similar to legacy behavior #min-all = hides everything — title, context, and query string
Expanded Bullet collapse
Fullwidth search bar

Code::

@import url('https://jmharris903.github.io/Railscast-for-Roam-Research-Theme/RailsRoam.css');

Better Roam Research

Screenshots::
- If your OS is in Light Mode:
- If your OS is in Dark Mode:
Github Link:: https://github.com/linuz90/better-roam-research
Designer::
- Fabrizio Rinaldi
  - Twitter:: @linuz90
Love this theme? Say thanks via Paypal
Special Features::
- #Dark Mode but only if your OS is set to dark!

Code::

:root {
  --font-size: 15.5px;
  --border-color: rgba(0, 0, 0, 0.08);
  --subtle-border-color: rgba(0, 0, 0, 0.05);
  --main-background-color: hsl(210, 9%, 98%);
  --body-background-color: #ffffff;
  --reference-item-background: hsl(0, 0%, 99%);
  --brackets-color: rgba(0, 0, 0, 0.25);
  --empty-text-color: hsl(203, 12%, 75%); }

.rm-title-untitled,
#block-input-ghost > span,
textarea::placeholder {
  color: var(--empty-text-color) !important; }

body,
div,
textarea,
.level2 {
  font-family: 'Quattro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; }

iframe {
  border: none !important; }

.loading-astrolabe {
  position: absolute !important;
  width: 80px !important;
  height: 80px !important;
  opacity: 0.3 !important;
  top: calc(50% - 40px) !important;
  left: calc(50% - 40px) !important; }

#roam-sidebar-logo {
  display: none !important; }

body,
#app {
  background: var(--main-background-color) !important; }

.roam-center {
  border-left: 1px solid var(--border-color) !important;
  border-top: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-radius: 6px;
  box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
  background: var(--body-background-color) !important;
  margin-top: 10px;
  margin-right: 16px;
  margin-left: 16px; }
  .roam-center > div:first-child {
    padding-right: calc(0.5 * (100% - 820px)) !important;
    padding-left: calc(0.5 * (100% - 820px)) !important; }

.roam-topbar {
  background: var(--main-background-color) !important; }
  .roam-topbar input#find-or-create-input {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important; }

.roam-body,
.roam-topbar,
#right-sidebar,
.roam-sidebar-container {
  background: transparent !important; }

#right-sidebar {
  border: none !important;
  transition: none !important;
  overflow: hidden !important; }
  #right-sidebar h1 {
    font-size: 18px !important; }
  #right-sidebar #roam-right-sidebar-content > div[style] {
    border-bottom: 1px solid var(--subtle-border-color) !important; }
  #right-sidebar .hoverparent,
  #right-sidebar .react-resizable {
    max-width: 100% !important; }
    #right-sidebar .hoverparent img,
    #right-sidebar .react-resizable img {
      max-width: 100% !important; }

.rm-page-ref-tag {
  color: #9099a1 !important; }

span.checkmark {
  top: -2px; }

.rm-level1 div,
.rm-level1 textarea {
  font-size: 22px !important;
  line-height: 1.5 !important; }

.rm-level2 div,
.rm-level2 textarea {
  font-size: 20px !important;
  line-height: 1.5 !important; }

.rm-level3 div,
.rm-level3 textarea {
  font-size: 18px !important;
  line-height: 1.5 !important; }

.level2 {
  font-weight: inherit !important; }

.roam-log-container .roam-log-page {
  border-top: 1px solid var(--subtle-border-color) !important; }
  .roam-log-container .roam-log-page:first-child {
    min-height: 0 !important;
    border-top: none !important; }

.rm-reference-item {
  background: var(--reference-item-background) !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 6px !important;
  padding: 8px 10px 8px 2px !important; }
  .rm-reference-item .rm-block-text {
    font-size: var(--font-size) !important; }

.CodeMirror {
  font-size: 13px !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page:hover {
  color: inherit !important;
  background-color: transparent !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page,
.bp3-minimal > div {
  color: #666666 !important;
  font-size: 13px !important; }

.roam-sidebar-content {
  padding: 0 !important; }
  .roam-sidebar-content > div:not(.log-button):not(:first-child) {
    padding: 0 !important; }
  .roam-sidebar-content > div:first-child {
    padding-bottom: 18px !important; }

.starred-pages-wrapper > div:first-child {
  display: none; }
.starred-pages-wrapper .flex-h-box,
.starred-pages-wrapper .flex-h-box span {
  font-size: 13px !important;
  opacity: 0.6 !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page {
  padding: 6px 24px 6px !important; }

.bp3-icon-small {
  padding-left: 24px !important; }

.rm-block-text {
  max-width: 640px !important;
  font-size: var(--font-size) !important; }

.block-bullet-view {
  margin-bottom: 3px !important; }

.roam-article > div > div h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  height: auto !important;
  line-height: 1.5 !important; }

.rm-title-display,
.rm-title-textarea {
  height: auto !important;
  line-height: 1.5 !important; }

.roam-log-container .roam-log-preview h1 {
  font-size: 22px !important;
  font-weight: 700 !important; }

strong {
  font-weight: 700 !important; }

.block-border-left {
  border-left-color: var(--subtle-border-color) !important; }

.rm-reference-main div > strong {
  color: gray !important; }

@media (prefers-color-scheme: dark) {
  body {
    background: #171717 !important; }

  #app {
    filter: invert(1) hue-rotate(180deg) !important; }

  img,
  div#buffer,
  .bp3-portal,
  .intercom-app,
  .loading-astrolabe,
  .bp3-dialog,
  .twitter-tweet,
  iframe {
    filter: invert(1) hue-rotate(180deg) !important; }

  .roam-highlight {
    background-color: #e2cb47 !important; }

  .bp3-overlay-backdrop {
    background-color: rgba(255, 255, 255, 0.7) !important; }

  :root {
    --border-color: rgba(0, 0, 0, 0.07) !important;
    --subtle-border-color: rgba(0, 0, 0, 0.05) !important;
    --main-background-color: hsl(0, 0%, 96%) !important;
    --body-background-color: hsl(0, 0%, 90%) !important;
    --reference-item-background: hsl(0, 0%, 93%) !important;
    --brackets-color: rgba(0, 0, 0, 0.3) !important;
    --empty-text-color: hsl(203, 5%, 70%); } }

Zenith

Screenshots::
Github Link:: https://github.com/azlen/roam-themes
Designer::
- Azlen Elza
  - Twitter:: @azlenelza
  - Also created Cosmonaut and Yggdrasil
Love this theme? Say thanks via Paypal.
Special Features::
- Collapsible columns -- side-by-side view for items opened in the sidebar
- Searchbar appears in main page
- Overlay side-by-side view over graph/diagram

Code::

/* IMPORT CORE THEME */
@import url('https://azlen.github.io/roam-themes/core.css');

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');	

:root {	
    --page-width: 616px;
    --page-order: row-reverse; /* new pages show up to the right */
    /*--page-order: row; /* new pages show up to the left */
    
    --header-font: "Source Sans Pro", "Inter", sans-serif;	
    --body-font: "Source Sans Pro", "Inter", sans-serif;	
    	
    --bg-color: #EEEEEE;	
    --page-color: rgba(255, 255, 255, 0.95);	
    	
    --text-color: #000000;	
    --icon-color: #5c7080;
    --bullet-color: rgba(0, 0, 0, 0.2);	
    	
    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);	
    	
    --color-primary: 73, 197, 91;	
    --color-primary-contrast: #FFFFFF;	
    --color-secondary: 147, 100, 235;

    --color-secondary-contrast: #FFFFFF;	
}

/* CHANGE COLOURS IN CANVAS */
canvas[data-id="layer2-node"] {	
    filter: invert(1) hue-rotate(110deg) saturate(2.5);	
}

Cosmonaut

Screenshots::
Github Link:: https://github.com/azlen/roam-themes
Designer:: Azlen Elza
Special Features::
- #Dark Mode
- Variation on Zenith which has:
  - Collapsible columns -- side-by-side view for items opened in the sidebar
  - Searchbar appears in main page
  - Overlay side-by-side view over graph/diagram

Code::

/* IMPORT CORE THEME */
@import url('https://azlen.github.io/roam-themes/core.css');

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* VARIABLES */
:root {
    --page-width: 616px;
    
    --header-font: "Oxanium", "Inter", sans-serif;
    --body-font: "Ubuntu", "Inter", sans-serif;
    
    --bg-color: #000000;
    --page-color: rgba(44, 44, 44, 0.95);
    
    --text-color: #FFFFFF;
    --icon-color: rgb(102, 102, 102);
    --bullet-color: rgba(255, 255, 255, 0.3);
    
    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.25);
    
    --color-primary: 47, 155, 249;
    --color-primary-contrast: #FFFFFF;
    --color-secondary: 228, 78, 244;
    
    --color-secondary-contrast: #FFFFFF;
}

/* CHANGE COLOURS IN CANVAS */
canvas[data-id="layer2-node"] {
    filter: invert(1) contrast(1.1) hue-rotate(180deg) saturate(2);
}

/* CODE BLOCK STYLING */
/* modified from https://codemirror.net/demo/theme.html#night */
.CodeMirror { background: var(--bg-color) !important; color: #f8f8f8 !important; }
div.CodeMirror-selected { background: #447 !important;  }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-gutters { background: var(--bg-color); border-right: 1px solid #252525; }
.CodeMirror-guttermarker { color: white !important; }
.CodeMirror-guttermarker-subtle { color: #bbb !important; }
.CodeMirror-linenumber { color: #f8f8f8; }
.CodeMirror-cursor { border-left: 1px solid white !important; }
span.cm-qualifier { color: #666666 !important; }
span.cm-comment { color: #C71FF9 !important; }
span.cm-atom { color: #B58AFD !important; }
span.cm-number, span.cm-attribute { color: #ffd500 !important; }
span.cm-keyword { color: #599eff !important; }
span.cm-string { color: #37f14a !important; }
span.cm-meta { color: #369BFF !important; }
span.cm-variable-2, span.cm-tag { color: #99b2ff !important; }
span.cm-variable-3, span.cm-def, span.cm-type { color: white !important; }
span.cm-bracket { color: #8da6ce !important; }
span.cm-builtin, pan.cm-special { color: #ff9e59 !important; }
span.cm-link { color: #845dc4 !important; }
span.cm-error { color: #F41000 !important; }
.CodeMirror-activeline-background { background: #1C005A !important; }
.CodeMirror-matchingbracket { outline:1px solid grey !important; color:white !important; }

Yggdrasil

Screenshots::
Github Link:: https://github.com/azlen/roam-themes
Designer:: Azlen Elza
Special Features::
- Collapsible columns -- side-by-side view for items opened in the sidebar
- Searchbar appears in main page
- Overlay side-by-side view over graph/diagram

Code::

/* IMPORT CORE THEME */
@import url('https://azlen.github.io/roam-themes/core.css');

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* VARIABLES */
:root {
    --page-width: 616px;
    
    --header-font: "Crimson Text", serif;
    --body-font: "Crimson Text", serif;
    
    --bg-color: #f5f1e2;
    --page-color: rgba(236, 231, 209, .95);
    
    --text-color: #000000;
    --icon-color: #5c7080;
    --bullet-color: rgba(0, 0, 0, 0.2);
    
    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.02);
    --color-primary: 181, 124, 38;
    --color-primary-contrast: #FFFFFF;
    --color-secondary: 100, 181, 38;
    
    --color-secondary-contrast: #FFFFFF;
}

/* YGGDRASIL CUSTOM STYLES */

.rm-page-ref-tag {
    padding: 3px 6px 2px 6px;
}

/* reverse colours for saving / saving-remote so that green is used for "saved" */
.rm-saving-icon .rm-synced {
    background-color: rgb(var(--color-secondary));
}
.rm-saving-icon .rm-saving-remote {
    background-color: rgb(var(--color-primary));
}

.block-bullet-view .bp3-button:not([class*="bp3-icon"]) {
    padding: 5px 14px 0px 14px!important;
}

.kanban-card {
    box-shadow: 0px 1px 2px rgba(0,0,0, 0.3);
}
.kanban-column {
    background-color: var(--bg-color);
}

/* CHANGE COLOURS IN CANVAS */

canvas[data-id="layer2-node"] {
    filter: invert(1) hue-rotate(170deg) saturate(2.5);
}

Team Favorites

"Advaita" aka Better Dark Age / Dracula Pro

Screenshots::
- Dracula Pro
Last updated:: May 23rd, 2026
Designer:: Abhay Prasanna
- Twitter:: @AbhayPrasanna
- Love this theme? Say thanks via PayPal or Venmo @Abhay-Prasanna (all proceeds reinvested in the Roam community!)
Special Features::
- Very responsive to CSS changes (update within 24 hours)
- Multiple Dark Colorsets
  - Material Palenight
  - Dark Night
  - Shades of Purple
- Switches to Light mode based on OS setting
- Masonry add-on
  - Pages stack in columns in sidebar
- Rainbow indents add-on
  - Colorful shadowed indent levels

Code::

@import url('https://abhayprasanna.github.io/material-palenight-roam.css');
@import url('https://abhayprasanna.github.io/rainbow-indent.css');
@import url('https://abhayprasanna.github.io/dark-masonry.css') (min-width:700px);

Replace "dark-age-dracula" with the following for other colorsets:
- material-palenight-roam *
- dark-night-roam *
- shades-of-purple *
Various optional adjustments I use in my own theme (annotated in code):
- {{roam/css}}
  - ```
  @import url('https://abhayprasanna.github.io/optional.css');
```

Leyendecker

Designer::
- Maggie Appleton
  - Twitter:: @mappletons
Love this theme? Say thanks via Paypal
Special Features::
- Queries and Kanbans got some extra love.
- Custom data-tags are all at the end of the CSS file, which you'll probably want to edit/customise.

Code::

Site-wide

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
    font-size: 3em;
}
div,
textarea {
    font-weight: 400;
    color: #3F4758;
    font-size: 1.002em;
}
.roam-block-container {
    max-width: 1000px;
}

.rm-pomodoro {
    background: #fff !important;
    color: #ff4747 !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em;
    border: 1px solid #ff474770;
}

.rm-pomodoro {
    background: #ff6956 !important;
    color: #fff !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em;
    border: 1px solid #ed5845;
}

.rm-pomodoro::first-letter {
  margin-right: 8px;
}

.rm-query {
    border: 0.5px solid #e4e9ec;
    border-radius: 5px;
    
}

.rm-query .rm-query-title {
    background-color: #f7f8f8;
    padding: 0.8em;
    color: #d1dbe2;
    font-size: 80%;
}

.rm-reference-main.rm-query-content {
    padding: 0.8em;
}

.rm-reference-main .rm-reference-item .rm-block-text {
    font-size: 90%;
}

.rm-ref-page-view-title span {
    
}

.rm-reference-main .rm-reference-item .controls {
    margin-left: -1em;
}

.rm-ref-page-view {
    padding: 0.4em 0.2em;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
    padding: 6px;
}

div.flex-v-box.starred-pages-wrapper > div.flex-h-box > span {
    font-size: 14px !important;
    opacity: 80%;
    letter-spacing: 0.04em;
}

div.roam-sidebar-container.noselect > div > div {
    font-size: 14px !important;
    letter-spacing: 0.03em;
    
}

#block-input {
    background: white;
}

.roam-body #block-input > span > div {
    padding: 6px 24px;
    background: white;
}

span.bp3-icon-small.bp3-icon-star {
    display: none;
    visibility: hidden;
}

.roam-block {
    max-width: 850px;
}

#right-sidebar > div {
    background-color: #f7f8fa;
    border-left: 1px solid #e9ebef;
}
.controls .simple-bullet-outer .simple-bullet-inner {
    background-color: #e5e9f2;
}
.block-border-left {
    border-left: 1px solid #f3f6f7;
}
.kanban-board {
    background-color: #fff;
}
.kanban-card {
    background-color: white;
    margin: 8px;
    box-shadow: 0px 1px 2px #9eb3c0a8;
    padding: 10px;
    border-radius: 2px;
    line-height: 1.3em;
}
.kanban-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.1em;
    opacity: 80%;
    color: #485f6f;
    padding-top: 8px;
    border-bottom: 1px solid #c5d1d8;
}
.kanban-column {
    background-color: #e7eff3;
    margin: 0px 4px 0px 4px;
    padding: 4px;
    min-width: 200px;
    border-radius: 3px;
}


.rm-block-ref::before {
    content: '';
    display: inline-block;
    width: 2px;
    border-radius: 40px;
    height: 12px;
    background: #ff913c;
    margin-right: 8px;
}
.rm-block-ref {
    border-bottom: none;
    font-size: 1em;
    color: #515e70;
}
.rm-block-ref:hover {
    background: none;
    cursor: pointer;
}
.checkmark {
    background: #fff;
}
.check-container input:checked ~ .checkmark {
    background: #33bdea;
}
.check-container input:checked ~ .checkmark:after {
    border-color: #fff;
}
.rm-reference-item {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #e4e9ee;
    margin-right: 8px;
    flex: 1 1 100%;
    word-break: break-word;
    background-color: #f7f9fb;
    padding: 8px;
}

.rm-level2 {
    font-size: 1.5em;
}
.rm-level3 {
    color: #939aae;
    font-weight: 400;
    font-size: 1.3em;
}
.rm-page-ref {
    color: #9aabd0;
}
.rm-page-ref-link-color {
    color: #ec6f35;
    font-weight: 600;
}
a {
    color: #8A3CC8;
}
.intercom-app,
.intercom-launcher-frame,
#intercom-container {
    display: none !important;
}
.roam-body .roam-app .roam-sidebar-container {
    background-color: white;
    border-right: 1px #eee solid;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.roam-body .roam-app .roam-sidebar-container > * {
    opacity: 80%;
    box-shadow: none;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover {
    background: white;
    color: black;
    opacity: 100%;
}
#buffer.tall {
    height: calc(100vh - 50px) !important;
}
.check-container {
    padding-right: 4px;
}
span.rm-page-ref {
    border-radius: 2px;
    padding-left: 1px;
    padding-right: 1px;
}
.content span.rm-page-ref {
    padding: 4px 1px 1px;
    /* required for fixing azo */
}
.center-proj {
    text-align: center;
}

Tag Styles


/* Custom data tags */
span.rm-page-ref[data-tag="Tweet"] {
    background: #81D5ED !important;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

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


span.rm-page-ref[data-tag="Evergreens"] {
    background: #0DBAC6 !important;
    color: #fff !important;
    padding: 3px 8px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Seedling"] {
    color: #0dbac6 !important;
    padding: 3px 3px;
    font-weight: 600;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Idea Bank"] {
    color: #FCB815 !important;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Idea Bank"]:before {
    content: '✦ '
}

span.rm-page-ref[data-tag="Illustrated Notes"] {
    color: #7172FC;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Garden Notes"] {
    color: #9DBC13;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Video Tutorial"] {
    color: #db3b8d;
    padding: 3px 4px;
    line-height: 1.4em;
    font-weight: 700;
}

span.rm-page-ref[data-tag="Essay"] {
    background: #ADCB2A;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}


span.rm-page-ref[data-tag="Livestream"] {
    color: #B979CF;
    padding: 3px 4px;
    line-height: 1.4em;
    font-weight: 700;
}

span.rm-page-ref[data-tag="Talk"] {
    background: #7172FC;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Waiting"] {
    background: #F9C866;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

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

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


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

Feature Expansions

Nested Links

Designer:: Cato Minor
Special Features::
- Additional underlining for nested tags

Code::

Last updated June 4th, 2020

:root {
    --custom-background-color: lightsteelblue;
    --custom-background-color-hover: orange;
    }


.rm-page-ref-link-color{
   color:black !important;
    background: linear-gradient(0deg, var(--custom-background-color) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
    line-height: 24px;
    padding-bottom: 4px;
}

.rm-page-ref-link-color:hover{
   color:black !important;
    background: linear-gradient(0deg, var(--custom-background-color-hover) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
    text-decoration: none;
    line-height: 24px;
    padding-bottom: 4px;
}

.rm-page-ref-link-color .rm-page-ref-link-color {
color: black !important;
  background: linear-gradient(0deg, var(--custom-background-color) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 28px;
    padding-bottom: 8px;
}

.rm-page-ref-link-color .rm-page-ref-link-color:hover {
color: black !important;
  background: linear-gradient(0deg, var(--custom-background-color-hover) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 28px;
    padding-bottom: 8px;
}


.rm-page-ref-link-color .rm-page-ref-link-color .rm-page-ref-link-color {
color: black !important;
background: linear-gradient(0deg, var(--custom-background-color) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 32px;
    padding-bottom: 12px;
}


.rm-page-ref-link-color .rm-page-ref-link-color .rm-page-ref-link-color:hover {
color: black !important;
background: linear-gradient(0deg, var(--custom-background-color-hover) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 32px;
    padding-bottom: 12px;
}

Block Level Customizations

from Maggie Appleton in Leyendecker

Tag Styles


/* Custom data tags */
span.rm-page-ref[data-tag="Tweet"] {
    background: #81D5ED !important;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

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


span.rm-page-ref[data-tag="Evergreens"] {
    background: #0DBAC6 !important;
    color: #fff !important;
    padding: 3px 8px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Seedling"] {
    color: #0dbac6 !important;
    padding: 3px 3px;
    font-weight: 600;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Idea Bank"] {
    color: #FCB815 !important;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Idea Bank"]:before {
    content: '✦ '
}

span.rm-page-ref[data-tag="Illustrated Notes"] {
    color: #7172FC;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Garden Notes"] {
    color: #9DBC13;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Video Tutorial"] {
    color: #db3b8d;
    padding: 3px 4px;
    line-height: 1.4em;
    font-weight: 700;
}

span.rm-page-ref[data-tag="Essay"] {
    background: #ADCB2A;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}


span.rm-page-ref[data-tag="Livestream"] {
    color: #B979CF;
    padding: 3px 4px;
    line-height: 1.4em;
    font-weight: 700;
}

span.rm-page-ref[data-tag="Talk"] {
    background: #7172FC;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Waiting"] {
    background: #F9C866;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

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

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


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