Roam Research Docs · Help & user documentation

Themes

• .--
  • Request to be featured
  • Applying Custom Themes to you Graph by Conor White-Sullivan
    • {{video: https://youtu.be/UY-sAC2eGyI }}
  • Team Favorites
    • "Advaita" aka Better Dark Age / Dracula Pro
      • Screenshots::
        • Dracula Pro
          • 
      • Last updated:: December 30th, 2020
      • 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::
        • {{roam/css}}

          • @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');

    • Railscast
      • Screenshots::
        • 
      • Last updated:: January 6th, 2021
      • Designer:: Jeff Harris
        • Twitter:: @jeffharrissays
        • Love this theme? Say thanks via Cash App or paypal
      • Special Features::
        • Robust variables for customization
          • {{roam/css}}

            • 
              :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::
        • {{roam/css}}

          • @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:
          • 
      • 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::
        • Last updated June 4th, 2020. If it's been a while, you can check Github for the latest version.
        • {{roam/css}}

          • :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%); } }

    • 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::
        • Last updated June 4th, 2020
        • Site-wide
          • {{roam/css}}

            • 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
          • {{roam/css}}

            • 
              /* 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;
              }

    • Zenith
      • 
      • Designer:: Azlen Elza
        • Twitter:: @azlenelza
        • Love this theme? Say thanks via Paypal.
        • Also created Cosmonaut and Yggdrasil
      • 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::
        • {{roam/css}}

          • /* 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);	
            }

  • Dark Modes
    • Cosmonaut
      • 
      • Designer:: Azlen Elza
        • Twitter:: @azlenelza
        • Love this theme? Say thanks via Paypal.
        • Also created Zenith and Yggdrasil
      • 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::
        • {{roam/css}}

          • /* 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; }

  • Feature Expansions
    • Nested Links
      • 
      • Designer:: Cato Minor
        • Twitter:: @CatoMinor3
        • Love this theme? Say thanks via Paypal
      • Special Features::
        • Additional underlining for nested tags
          • 
      • Code::
        • Last updated June 4th, 2020
        • {{roam/css}}

          • :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;
            }

  • More Colors
    • Yggdrasil
      • 
      • Designer:: Azlen Elza
        • Twitter:: @azlenelza
        • Love this theme? Say thanks via Paypal.
        • Also created Cosmonaut and Zenith
      • 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::
        • {{roam/css}}

          • /* 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);
            }

  • Block Level Customizations
    • from Maggie Appleton in Leyendecker
      • Tag Styles
        • {{roam/css}}

          • 
            /* 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;
            }

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