qraymo Garden

Powered by 🌱Roam Garden

roam/css

Roam iA Writer Quattro theme

@import url('https://gistcdn.githack.com/kewah/a81d1824486d0f3abab55bb6362e5249/raw/a99c24a5e87e3efc6fc15a42b1e15a1a1034710b/style.css');

c3founder/enhancedYouTube

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.css');

calrobertlee/Lux Theme

@import url('https://calrobertlee.github.io/roam-themes/lux.css');

calrobertlee/Aqaue

@import url('https://calrobertlee.github.io/roam-themes/aquae.css');

calrobertlee/Nox

@import url('https://calrobertlee.github.io/roam-themes/nox.css');

Better Roam Research

@import url("https://linuz90.github.io/better-roam-research/main.css");

roam/sr

custom data tags

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

c3founder/pdf-highlights

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedPDF.css');

The Observer Theme

Themes

The Observer

Fonts

Load Fonts

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.rcvd.io/iA Writer/stylesheet.css');

UI

Help

:root {
  --fnt-help:       'iA Writer Quattro S', sans-serif;
  --fnt-size-help:  14px;
}

Left Sidebar

:root {
  --fnt-left-sidebar:       'iA Writer Quattro S', sans-serif;
  --fnt-size-left-sidebar:  14px;
}

Menus

:root {
  --fnt-menu:               'iA Writer Quattro S', sans-serif;
}

Top Bar

:root {
  --fnt-input:              'iA Writer Quattro S', sans-serif;
}

Default Font

:root {
  --fnt-default: 'iA Writer Quattro S', sans-serif;
}

Content

Body

:root {
  --fnt-text:           'iA Writer Quattro S', sans-serif;
  --fnt-size-text:      14px;
}

Headings

Preview

Heading 1

Heading 2

Heading 3

Settings

:root {
  --fnt-page-title:         'Merriweather', serif;
  --fnt-h1:                 'Merriweather', serif;
  --fnt-h2:                 'Merriweather', serif;
  --fnt-h3:                 'Merriweather', serif;
  --fnt-size-page-title:    28px;
  --fnt-size-h1:            18px;
  --fnt-size-h2:            16px;
  --fnt-size-h3:            14px;
  --fnt-style-h1:           normal;
  --fnt-style-h2:           normal;
  --fnt-style-h3:           normal;
  --fnt-weight-h1:          500;
  --fnt-weight-h2:          500;
  --fnt-weight-h3:          500;
}

Tags

:root {
  --fnt-tags:           'iA Writer Quattro S', sans-serif;
}

Special Blocks

Code

:root {
  --fnt-code:           'iA Writer Mono S', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --fnt-size-code:      13px;
}

Quote

:root {
  --fnt-size-quote: 14px;
  --fnt-style-quote: normal;
}

Colors

Color Scheme

Use these for consistent colors

:root {
  --cl-white:           hsl(40,30%,100%);
  --cl-gray-50:         hsl(0,0%,95%);
  --cl-gray-100:        hsl(0,0%,90%);
  --cl-gray-200:        hsl(0,0%,80%);
  --cl-gray-300:        hsl(0,0%,70%);
  --cl-gray-400:        hsl(0,0%,60%);
  --cl-gray-500:        hsl(0,0%,50%);
  --cl-gray-600:        hsl(0,0%,40%);
  --cl-gray-700:        hsl(0,0%,30%);
  --cl-gray-800:        hsl(0,0%,20%);
  --cl-gray-900:        hsl(0,0%,10%);
  --cl-beige-50:        hsl(40,30%,95%);
  --cl-beige-100:       hsl(40,30%,90%);
  --cl-beige-200:       hsl(40,30%,80%);
  --cl-beige-300:       hsl(40,30%,70%);
  --cl-beige-400:       hsl(40,30%,60%);
  --cl-beige-500:       hsl(40,30%,50%);
  --cl-beige-600:       hsl(40,30%,40%);
  --cl-beige-700:       hsl(40,30%,30%);
  --cl-beige-800:       hsl(40,30%,20%);
  --cl-beige-900:       hsl(40,30%,10%);
  --cl-black:           hsl(40,30%,0%);
  --cl-green-500:       #1a8917;
  --cl-blue-50:         #eff8ff;
  --cl-blue-200:        #a3d7ff;
  --cl-yellow-200:      #FDE68A;
  --cl-red-50:          #FEF2F2;
  --cl-red-500:         #D91B22;
}

UI

All Pages

Modifies the "All Pages" site, found in the left sidebar

Colors

:root {
  --fg-all-pages-title:                 var(--cl-gray-800);
  --bg-all-pages-header:                var(--cl-gray-100);
  --fg-all-pages-header:                var(--cl-gray-800);
  --fg-all-pages-header-sorted:         var(--cl-gray-900);
  --bg-all-pages-clickable-pill:        var(--cl-gray-800);
  --fg-all-pages-title-col:             var(--cl-gray-500);
  --fg-all-pages-row:                   var(--cl-gray-500);
  --br-all-pages-row:                   var(--cl-gray-400);
}

Brackets

Modifies the color of the Brackets when linking Pages

Colors

:root {
  --fg-brackets: var(--cl-gray-500);
}

Buttons and Icons

Modifies icons in the top- and sidebar as well as buttons in the filter dialog.

Colors

:root {
  --fg-buttons:         var(--cl-gray-500);
  --bg-buttons:         transparent;
  --fg-buttons-hover:   var(--cl-red-500);
  --bg-buttons-hover:   transparent;
}

Caret

Modifies the little caret the folds bullets

Colors

:root {
  --fg-caret:       var(--cl-grey-500);
}

Help

Modifies the help dialog

Colors

:root {
  --bg-help:    var(--cl-beige-100);
  --fg-help:    var(--cl-gray-700);
}

Left Sidebar

Modifies the left sidebar

Colors

:root {
  --bg-left-sidebar:        var(--cl-beige-50);
  --bg-left-sidebar-hover:  var(--cl-beige-50);
  --bg-left-sidebar-hr:     var(--cl-gray-500);
  --fg-left-sidebar:        var(--cl-gray-700);
  --fg-left-sidebar-hover:  var(--cl-red-500);
  --fg-left-dropdown-title: var(--cl-beige-600);
  --fg-left-sidebar-icons:  var(--cl-gray-500);
}

Log

Modifies the color of the daily log

Colors

:root {
  --fg-log-hr:  var(--cl-gray-500);
  --fg-log:     var(--cl-gray-500);
}

Menus

Changes the color and fonts of the different menus

Notice We can't change the selection background in some menus yet, so make sure, that your colors will fit - avoid too light and too dark shades.

Colors

:root {
  --bg-menu:        var(--cl-beige-50);
  --bg-menu-hover:  #d5dae0;
  --fg-menu:        var(--cl-gray-900);
  --fg-menu-hover:  var(--cl-gray-900);
  --br-menu-hr:     var(--cl-beige-300);
}

Right Sidebar

Modifies the right sidebar

Colors

:root {
  --br-sidebar-content: var(--cl-gray-200);
  --bg-right-sidebar: var(--cl-beige-50);
}

Top Bar

Modifies colors and fonts of the topbar including the "Find or Create Page"-Input.

Colors

:root {
  --bg-topbar:              var(--cl-beige-50);
  --bg-input:               var(--cl-white);
  --br-input:               var(--cl-white);
  --fg-input:               var(--cl-gray-800);
  --fg-input-placeholder:   var(--cl-gray-500);
}

Content

Block References

Preview

This is referenced

This is referenced

Colors

:root {
  --fg-block-ref:       var(--cl-gray-100);
  --bg-block-ref-hover: var(--cl-blue-50);
}

Body

:root {
  --primary-color:      var(--cl-gray-800);
  --background-color:   var(--cl-white);
  --bg-body:            var(--cl-white);
  --fg-body:            var(--cl-gray-800);
}

Breadcrumbs

Modifies the breadcrumbs (zoom items) 

:root {
  --bg-zoom:            transparent;
  --fg-zoom:            var(--cl-gray-500);
  --bg-zoom-mask:       var(--cl-gray-50);
}

Bullets and Lines

Changes the bullets and lines for blocks

Preview

A single bullet

A line to the left

A closed bullet

Colors

:root {
  --bg-bullet-inner:        var(--cl-gray-200);
  --bg-bullet-inner-focus:  var(--cl-red-500);
  --br-bullet-outer:        var(--cl-gray-200);
  --br-block:               var(--cl-gray-200);
}

Headings

Modifies the Headings Level 1 - 3

Preview

Heading 1

Heading 2

Heading 3

:root {
  --fg-h1:              var(--cl-gray-900);
  --fg-h2:              var(--cl-gray-900);
  --fg-h3:              var(--cl-gray-900);
}

Highlights

Modifies the highlights

Preview

This text is highlighted

Colors

:root {
  --bg-highlight:       var(--cl-blue-50);
  --bg-highlight-blue:  var(--cl-blue-200);
  --bg-highlight-yellow:var(--cl-blue-200);
  --bg-highlight-grey:  var(--cl-gray-200);
}

Inline References

Preview

Inline References

Colors

:root {
  --bg-inline-ref:  var(--cl-gray-50);
  --br-inline-ref:  var(--cl-gray-500);
}

Links

Modifies the color of links and references pages

Preview

This is a link, this is a reference to a page Test Page

Colors

:root {
  --fg-link:            var(--cl-red-500);
  --fg-link-hover:      var(--cl-red-500);
  --fg-reference:       var(--cl-red-500);
  --fg-reference-hover: var(--cl-red-500);
}

Reference Blocks

Modifies the background of the reference blocks

Colors

:root {
  --bg-reference:       var(--cl-beige-50);
}

Tags

Modifies the apperance of tags

Preview

tag1 tag2

Colors

:root {
  --fg-tag:             var(--cl-gray-400);
}

Special Blocks

Calc

Modifies the color of the calculation result

Preview

{{calc: 31 + 11}}

Colors

:root {
  --fg-calc:        var(--cl-green-500);
}

Code

Modifies the color of Codeblocks and Inline Code

Preview

Inline code and Codeblocks:

const baseValue = prompt('Enter the base of a triangle: ');
const heightValue = prompt('Enter the height of a triangle: ');

// calculate the area
const areaValue = (baseValue * heightValue) / 2;

console.log(
  `The area of the triangle is ${areaValue}`
);

Inline Code

Colors

:root {
  --fg-inline-code:         var(--cl-gray-800);
  --bg-inline-code:         var(--cl-blue-50);
  --br-inline-code:         var(--cl-gray-300);
}

Code Block

Colors

:root {
  --bg-code:                        var(--cl-blue-50);
  --bg-code-filler:                 var(--cl-blue-50);
  --bg-code-gutters:                var(--cl-blue-50);
  --bg-code-selected:               var(--cl-gray-300);
  --bg-code-selection:              var(--cl-blue-200);
  --bg-code-focused:                var(--cl-blue-200);
  --bg-code-searching:              rgba(255, 255, 0, 0.4); 
  --bg-code-matchingtag:            rgba(255, 150, 0, 0.3);
  --bg-code-activeline:             var(--cl-white);
  --bg-code-fat-cursor:             #7e7;
  --bg-code-fat-cursor-mark:        rgba(20, 255, 20, 0.5);
  --bg-code-fat-cursor-animate:     #7e7;
  --br-code-gutters:                var(--cl-white);
  --br-code-cursor:                 var(--cl-red-500);
  --br-code-secondary-cursor:       var(--cl-gray-400);
  --br-code-ruler:                  var(--cl-gray-400);
  --fg-code-linenumber:             var(--cl-gray-500);
  --fg-code-guttermarker:           var(--cl-black);
  --fg-code-guttermarker-subtle:    var(--cl-gray-500);
}

Syntax Highlighting

Colors

:root {  
  --fg-code:                    var(--cl-gray-800);
  --fg-code-header:             var(--cl-gray-800);
  --fg-code-quote:              var(--cl-gray-800);
  --fg-code-negative:           var(--cl-gray-800);
  --fg-code-positive:           var(--cl-gray-800);
  --fg-code-keyword:            var(--cl-gray-800);
  --fg-code-atom:               var(--cl-gray-800);
  --fg-code-number:             var(--cl-gray-800);
  --fg-code-def:                var(--cl-gray-800);
  --fg-code-variable-2:         var(--cl-gray-800);
  --fg-code-variable-3:         var(--cl-gray-800);
  --fg-code-comment:            var(--cl-gray-800);
  --fg-code-string:             var(--cl-gray-800);
  --fg-code-string-2:           var(--cl-gray-800);
  --fg-code-meta:               var(--cl-gray-800);
  --fg-code-qualifier:          var(--cl-gray-800);
  --fg-code-builtin:            var(--cl-gray-800);
  --fg-code-bracket:            var(--cl-gray-800);
  --fg-code-tag:                var(--cl-gray-800);
  --fg-code-attribute:          var(--cl-gray-800);
  --fg-code-hr:                 var(--cl-gray-800);
  --fg-code-link:               var(--cl-gray-800);
  --fg-code-error:              var(--cl-gray-800);
  --fg-code-invalidchar:        var(--cl-gray-800);
  --fg-code-matchingbracket:    var(--cl-gray-800);
  --fg-code-nonmatchingbracket: var(--cl-gray-800);
}

Diagrams

Diagrams can't be modified yet. This is a problem with dark mode settings.

Preview

{{diagram}}

A

B

Embed

Changes the background color of embed blocks

Preview

Sample Data

Embed 1

{{embed:

Embed 2
}}

Embed 2

{{embed:

Embed 3
}}

Embed 3

{{embed:

Embed 1
}}

Colors

:root {
  --bg-embed-1:     var(--cl-beige-50);
  --bg-embed-2:     var(--cl-beige-100);
  --bg-embed-3:     var(--cl-beige-200);
  --bg-embed-4:     var(--cl-beige-300);
  --bg-embed-5:     var(--cl-beige-400);
}

HR

Modifies horizontal lines

Preview

Colors

:root {
 --br-hr:   var(--cl-gray-200);
}

Kanban

Modifies Kanban boards

Preview

{{kanban}}

Ready

Card 1

Done

Card 2

Colors

:root {
  --bg-kanban-board:    var(--cl-white);
  --br-kanban-board:    var(--cl-beige-200);
  --bg-kanban-column:   var(--cl-beige-100);
  --bg-kanban-card:     var(--cl-beige-50);
  --fg-kanban-card:     var(--cl-black);
}

Mermaid

Modifies Mermaid diagrams

Preview

{{mermaid}}

graph TD;

A-->B;

A-->D;

B-->D;

C-->D;

Colors

:root {
  --bg-mermaid:         var(--cl-white);
  --bg-mermaid-node:    var(--cl-gray-300);
  --fg-mermaid-label:   var(--cl-gray-800);
  --br-mermaid-node:    var(--cl-gray-500);
}

Pomodoro

{{POMO: 25}}

Colors

:root {
  --bg-pomodoro:            var(--cl-white);
  --br-pomodoro:            var(--cl-gray-100);
  --fg-pomodoro:            var(--cl-gray-800);
  --bg-pomodoro-running:    var(--cl-red-50);
  --br-pomodoro-running:    var(--cl-red-500);
  --fg-pomodoro-running:    var(--cl-red-500);
  --bg-pomodoro-break:      var(--cl-green-50);
  --br-pomodoro-break:      var(--cl-green-500);
  --fg-pomodoro-break:      var(--cl-green-500);
}

Queries

Modifies the appearance of queries

Preview

{{query: {or: TODO [[]]}}}

Colors

:root {
  --bg-query-title:     var(--cl-gray-100);
  --fg-query-title:     var(--cl-gray-500);
  --br-query:           var(--cl-gray-200);
}

Quote

Modifies the design of quotes

Preview

This is a famous quote!

Color

:root {
  --bg-quote:           var(--cl-beige-50);
  --br-quote:           var(--cl-red-500);
  --fg-quote:           var(--cl-gray-800);  
}

Tables

Modifies tables

Preview

{{table}}

Column 1

Column 2

Row 1

Row 2

Colors

:root {
  --br-table:   var(--cl-gray-400);
}

Todo

Modifies the design of todos

Preview

{{TODO}} This is a todo

{{DONE}} This is a finished todo

Colors

:root {
  --br-checkbox: var(--cl-gray-600);
  --bg-checkbox-checked: var(--cl-gray-600);
  --br-checkmark: var(--cl-white);
}

Versions

Modifies the design of the version block

Preview

Version 1

Colors

:root {
  --bg-version-bullet:      var(--cl-gray-500);
  --fg-version-selected:    var(--cl-red-500);
  --br-version:             var(--cl-gray-300);
}

Additional Settings

UI

All Pages

Border Radius of header

Default

Buttons and Icons

Gradients and Shadows

Enable

Fix Block Radius

No Radius

.roam-block-container {
  border-radius: 0;
}

Heading in References

.rm-mentions .rm-ref-page-view .rm-ref-page-view-title {
  font-size: 14px;
}

Help

Shadow

#buffer {
  box-shadow: -5px -5px 25px -10px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}

Highlight focused block

Highlighted

.rm-focused > div > div > span > span .rm-bullet__inner {
  background-color: var(--bg-bullet-inner-focus);
}

Left Sidebar

Horizontal Line before starred items

Hide

#app > div > div > div.roam-sidebar-container.noselect > div > div.flex-v-box.starred-pages-wrapper > div:nth-child(1) {
  display: none;
}
  • SHORTCUTS

Hide

#app > div > div > div.roam-sidebar-container.noselect > div > div.flex-v-box.starred-pages-wrapper > div.flex-h-box {
  display: none;
}

Roam Research Logo

Hide

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

Shadow and transparency for Graph Dropdown

Disable

.roam-body .roam-app .roam-sidebar-container .rm-graph-dropdown {
  opacity: 100%;
  box-shadow: none;
}

Make Menu Items lowercase

Lowercase

.roam-body .roam-app .roam-sidebar-container {
  text-transform: lowercase;
}

Bold Text

Not so bold

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button {
  font-weight: 500;
}

Dropdown Title Size

Normal

.roam-body .roam-app .roam-sidebar-container .rm-graph-dropdown .menu-title {
  font-size: 14px;
}

Item Spacing and alignment

Smaller spacing and all items aligned left

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

Menu

Settings Font Size

Default

Overall bold settings

Default

Page Title

Default

References Color

Like Tags

#rm-log-container > div > div > div:nth-child(1) > div:nth-child(3) > div > div > div > div.flex-h-box > div:nth-child(3) {
  color: var(--fg-tag)!important;
}

#app > div > div.roam-app > div.flex-h-box > div.roam-main > div.roam-body-main > div:nth-child(1) > div > div:nth-child(2) > div > div > div > div > strong, 
#app > div > div.roam-app > div.flex-h-box > div.roam-main > div.roam-body-main > div:nth-child(1) > div > div:nth-child(2) > div > div > div.rm-reference-container > div.flex-h-box > div:nth-child(3) {
  color: var(--fg-tag)!important;
}

Reference Items

.rm-reference-item {
  margin-top: 0px;
}

.rm-mentions .rm-ref-page-view {
  margin-top: 8px;
}

.rm-reference-item .check-container {
  top: -7px;
}

Reference Caret

.rm-inline-references .rm-inline-reference .rm-caret-wrapper {
    margin-top: 3px;
}

Sidebar Content HR

Change Border

.sidebar-content > div > div {
  border-bottom: 1px solid var(--br-sidebar-content)!important;
}

Top Bar

Search Field Border

Slightly rounded

.bp3-input[type="search"], 
.bp3-input.bp3-round {
  border-radius: 5px;
}

Search Field Shadow

Remove Shadow

.bp3-input {
  -webkit-box-shadow: none;
  box-shadow: none;
}

Remove Focus Shadow

.bp3-input:focus, 
.bp3-input.bp3-active {
  box-shadow: none;
  -webkit-box-shadow: none;
}

Content

HR

Thinner

.rm-hr {
  border: none!important;
  border-bottom: 0.5px solid var(--br-hr)!important;
}

Link Style

Default

Special Blocks

Images

Example

Shadow

.rm-inline-img__resize {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 
              0 10px 10px -5px rgba(0,0,0,.04);
}

Mermaid

Height

Fixed

.rm-mermaid svg {
  min-width: unset;
}

Todo

Size

Default

Shape

Default

CSS Selectors (Only modify if you know what you are doing)

UI

All Pages

.rm-pages-title-text {
  color: var(--fg-all-pages-title);
}

.rm-all-pages .table .rm-pages-row.rm-pages-row-header {
  background-color: var(--bg-all-pages-header);
}

.rm-clickable-pill, 
.rm-clickable-pill.level1-pill {
  background-color: var(--bg-all-pages-clickable-pill);
}

.rm-clickable-pill-empty {
  background-color: var(--bg-all-pages-clickable-pill-empty);
}

.rm-pages-toolbar .toolbar-search-group .search-icon {
  color: var(--fg-input-placeholder);
}

.rm-pages-toolbar .toolbar-search-group .search-input {
  background-color: var(--bg-input);
  border: 1px solid var(--br-input);
  color: var(--fg-input);
}

.rm-pages-toolbar .toolbar-search-group .search-input:focus {
  border: 1px solid var(--br-input-focus);
}

.rm-all-pages .table .rm-pages-row .rm-pages-title-col {
  color: var(--fg-all-pages-title-col);
}

.rm-all-pages .table .rm-pages-row {
  border-bottom: 1px solid var(--br-all-pages-row);
  color: var(--fg-all-pages-row);
}

.rm-all-pages .table .rm-pages-row.rm-pages-row-header {
  color: var(--fg-all-pages-header);
}

.sorted-header-text {
  color: var(--fg-all-pages-header-sorted);
}

Buttons and Icons

.bp3-button:not([class*="bp3-intent-"]):hover {
  background-color: var(--bg-buttons-hover);
  color: var(--fg-buttons-hover);
}

.bp3-button[class*="bp3-icon-"]::before,
.bp3-button .bp3-icon, 
.bp3-button .bp3-icon-standard, 
.bp3-button .bp3-icon-large {
  color: var(--fg-buttons);
}

.bp3-button[class*="bp3-icon-"]:hover::before,
.bp3-button:hover .bp3-icon, 
.bp3-button:hover .bp3-icon-standard, 
.bp3-button:hover .bp3-icon-large {
  color: var(--fg-buttons-hover);
}

.bp3-button:not([class*="bp3-intent-"]) {
  background-color: var(--bg-buttons);
  color: var(--fg-buttons);
}

Brackets

.rm-page-ref__brackets {
  color: var(--fg-brackets);
}

Caret

.rm-caret {
  color: var(--fg-caret);
}

Default Font

div {
  font-family: var(--fnt-default);
}

Help

#buffer {
  background-color: var(--bg-help)!important;
}

#buffer a,
#buffer .help-title,
#buffer .help-sub-title,
#buffer .help-item-label,
#buffer .help-item-text {
  color: var(--fg-help)!important;
  font-size: var(--fnt-size-help);
  font-family: var(--fnt-help);
}

Left Sidebar

Colors

.roam-body .roam-app .roam-sidebar-container {
  background-color: var(--bg-left-sidebar);
}

#app > div > div > div.roam-sidebar-container.noselect > div > div.flex-v-box.starred-pages-wrapper > div:nth-child(1) {
  background-color: var(--bg-left-sidebar-hr)!important;
}

#roam-sidebar-logo:hover,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .rm-db-title .expand-icon:hover,
.roam-sidebar-container .top-row:hover .rm-db-title,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .top-row:hover,
.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-color: var(--bg-left-sidebar-hover);
  color: var(--fg-left-sidebar-hover);
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .rm-db-title .expand-icon,
.roam-sidebar-container .rm-db-title-container .rm-db-title,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button {
  color: var(--fg-left-sidebar);
}

.roam-body .roam-app .roam-sidebar-container .rm-graph-dropdown .menu-title {
  color: var(--fg-left-dropdown-title);
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .icon {
  color: var(--fg-left-sidebar-icons);
}

Fonts

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
.roam-body .roam-app .roam-sidebar-container div,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
  font-family: var(--fnt-left-sidebar);
  font-size: var(--fnt-size-left-sidebar);
}

Right Sidebar

#right-sidebar {
  background-color: var(--bg-right-sidebar);
}

Log

.roam-log-container .roam-log-page {
  border-top: 1px solid var(--fg-log-hr);
}

.roam-log-container .roam-log-preview {
  color: var(--fg-log);
}

.roam-log-container .roam-log-preview .level2 {
  font-weight: 500;
  color: var(--fg-log);
}

#block-input-ghost span {
  color: var(--fg-log)!important;
}

.rm-block--ghost .controls .simple-bullet-inner, 
.rm-block--ghost .rm-block__controls .simple-bullet-inner {
  background-color: var(--fg-log);
  margin-left: 1px;
}

Menus

.bp3-popover .bp3-popover-arrow-fill {
  fill: var(--bg-menu);
}

.bp3-elevation-3 {
  background: var(--bg-menu)!important;
  color: var(--fg-menu)!important;
}

.bp3-elevation-3 div {
  color: var(--fg-menu)!important;
}

.bp3-popover .bp3-popover-content,
.bp3-menu {
  background: var(--bg-menu);
  color: var(--fg-menu);
}

.rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item,
.bp3-menu-item {
  color: var(--fg-menu);
}

.bp3-menu-item:hover, 
.bp3-submenu .bp3-popover-target.bp3-popover-open>.bp3-menu-item {
  background: var(--bg-menu-hover);
  color: var(--fg-menu-hover);
}

.bp3-elevation-3 div,
.bp3-overlay div,
.bp3-menu-item div {
  font-family: var(--fnt-menu);
}

.bp3-popover-content > div > div > div > div > div > div {
  color: var(--fg-menu)!important;
}

.rm-line {
  border-color: var(--br-menu-hr)!important;
}

Top Bar

.roam-topbar {
  background-color: var(--bg-topbar);
}

.bp3-input {
  background-color: var(--bg-input);
  color: var(--fg-input);
  border: 1px solid var(--br-input);
  font-family: var(--fnt-input);
}

.bp3-input:focus {
  border: 1px solid var(--br-input-focus);
}

.bp3-input-group>.bp3-input-left-container>.bp3-icon, 
.bp3-input-group>.bp3-icon,
.bp3-input::placeholder {
  color: var(--fg-input-placeholder);
  font-family: var(--fnt-input);
}

#app > div > div > div.flex-h-box > div.roam-main > div.roam-topbar > div > div.rm-find-or-create-wrapper > div > div.bp3-overlay.bp3-overlay-inline > div > div > div > ul > div:nth-child(1) {
  color: inherit!important;
  opacity: 0.7;
}

Content and Blocks

Main

Block References

.rm-block-ref {
  border-bottom: 0.5px solid var(--br-block-ref);
}

.rm-block-ref:hover {
  background-color: var(--bg-block-ref-hover);
}

Body

body {
  background-color: var(--bg-body);
}

.roam-body .roam-app {
  color: var(--fg-body);
}

.roam-article textarea,
.roam-article div,
.rm-ref-page-view div,
.rm-block-main div,
.rm-block-main textarea,
.rm-ref-page-view textarea {
  font-family: var(--fnt-text);
  font-size: var(--fnt-size-text);
}

.rm-title-editing-display textarea {
  font-family: var(--fnt-text);
  font-size: var(--fnt-size-page-title);
}

Brackets

.rm-page-ref__brackets {
  color: var(--fg-brackets);
}

Breadcrumbs

.rm-zoom-path .rm-zoom-item,
.rm-zoom .rm-zoom-item {
  background-color: var(--bg-zoom);
  color: var(--fg-zoom);
}

.rm-zoom.zoom-path-view .rm-zoom-mask {
  background-color: var(--bg-zoom-mask);
}

Bullets and Lines

.rm-bullet__inner {
  background-color: var(--bg-bullet-inner);
}

.sidebar-content .rm-bullet.rm-bullet--closed .rm-bullet__inner,
.rm-bullet.rm-bullet--closed .rm-bullet__inner {
  border: 4px solid var(--br-bullet-outer);
}

.block-border-left {
  border-left: 1px solid var(--br-block);
}

Headings

h1.level2,
.rm-level2, 
.rm-heading-level-2 > .rm-block__self .rm-block__input {
  color: var(--fg-h2);
}

.roam-body .roam-app h1 {
  color: var(--fg-page-title);
}

.rm-level1, 
.rm-heading-level-1 > .rm-block__self .rm-block__input {
  color: var(--fg-h1);
}

.rm-level3, 
.rm-heading-level-3 > .rm-block__self .rm-block__input {
  color: var(--fg-h3);
}

.roam-body .roam-app h1,
.rm-level1, 
.rm-heading-level-1 > .rm-block__self .rm-block__input {
  font-family: var(--fnt-h1);
  font-size: var(--fnt-size-h1);
  font-weight: var(--fnt-weight-h1);
  font-style: var(--fnt-style-h1);
}

h1.level2,
.rm-level2, 
.rm-heading-level-2 > .rm-block__self .rm-block__input {
  font-family: var(--fnt-h2)!important;
  font-size: var(--fnt-size-h2);
  font-weight: var(--fnt-weight-h2);
  font-style: var(--fnt-style-h2);
}

.rm-level3, 
.rm-heading-level-3 > .rm-block__self .rm-block__input {
  font-family: var(--fnt-h3);
  font-size: var(--fnt-size-h3);
  font-weight: var(--fnt-weight-h3);
  font-style: var(--fnt-style-h3);
}

.roam-body .roam-app h1,
.roam-body .roam-app .roam-main .roam-article .rm-title-display {
  font-family: var(--fnt-page-title)!important;
  font-size: var(--fnt-size-page-title);
}

Highlights

.rm-highlight {
  background-color: var(--bg-highlight);
}

.block-highlight-grey {
  background-color: var(--bg-highlight-grey);
}

.block-highlight-blue {
  background-color: var(--bg-highlight-blue);
}

.block-highlight-yellow {
  background-color: var(--bg-highlight-yellow);
}

Inline References

.rm-inline-references {
    background-color: var(--bg-inline-ref);
    border-left: 2px solid var(--br-inline-ref);
}

Links

a {
  color: var(--fg-link);
}

a:hover {
  color: var(--fg-link-hover);
}

.rm-page-ref--link {
  color: var(--fg-reference);
}

.rm-page-ref--link:hover {
  color: var(--fg-reference-hover);
}

Reference Blocks

.rm-reference-item {
  background-color: var(--bg-reference);
}

Tags

.rm-page-ref--tag {
  color: var(--fg-tag);
}

Special Blocks

Calc

.rm-calc-val {
  color: var(--fg-calc);
}

Code

Colors

Inline Code

code {
  color: var(--fg-inline-code);
  background: var(--bg-inline-code);
  border: 1px solid var(--br-inline-code);
}

Code Block

.CodeMirror,
.CodeMirror-code {
  background-color: var(--bg-code);
  color:            var(--fg-code);
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: var(--bg-code-filler);
}

.CodeMirror-gutters {
  border-right: 1px solid var(--br-code-gutters);
  background-color: var(--bg-code-gutters);
}

.CodeMirror-linenumber {
  color: var(--fg-code-linenumber);
}

.CodeMirror-guttermarker {
  color: var(--fg-code-guttermarker);
}

.CodeMirror-guttermarker-subtle {
  color: var(--fg-code-guttermarker-subtle);
}

.CodeMirror-cursor {
  border-left: 1px solid var(--br-code-cursor);
}

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid var(--br-code-secondary-cursor);
}

.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--bg-code-fat-cursor);
}

.cm-fat-cursor-mark {
  background-color: var(--bg-code-fat-cursor-mark);
}

.cm-animate-fat-cursor {
  background-color: var(--bg-code-fat-cursor-animate);
}

.CodeMirror-ruler {
  border-left: 1px solid var(--br-code-ruler);
}

div.CodeMirror span.CodeMirror-matchingbracket {
  color: var(--fg-code-matchingbracket);
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: var(--fg-code-nonmatchingbracket);
}

.CodeMirror-matchingtag {
  background: var(--bg-code-matchingtag);
}

.CodeMirror-activeline-background {
  background: var(--bg-code-activeline);
}

.CodeMirror-selected {
  background: var(--bg-code-selected);
}

.CodeMirror-focused .CodeMirror-selected {
  background: var(--bg-code-focused);
}

.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background: var(--bg-code-selection);
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
  background: var(--bg-code-selection);
}

.cm-searching {
  background-color: var(--bg-code-searching);
}

Syntax Highlighting

.cm-s-default .cm-header {
  color: var(--fg-code-header);
}

.cm-s-default .cm-quote {
  color: var(--fg-code-quote);
}

.cm-negative {
  color: var(--fg-code-negative);
}

.cm-positive {
  color: var(--fg-code-positive);
}

.cm-s-default .cm-keyword {
  color: var(--fg-code-keyword);
}

.cm-s-default .cm-atom {
  color: var(--fg-code-atom);
}

.cm-s-default .cm-number {
  color: var(--fg-code-number);
}

.cm-s-default .cm-def {
  color: var(--fg-code-def);
}

.cm-s-default .cm-variable-2 {
  color: var(--fg-code-variable-2);
}

.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
  color: var(--fg-code-variable-3);
}

.cm-s-default .cm-comment {
  color: var(--fg-code-comment);
}

.cm-s-default .cm-string {
  color: var(--fg-code-string);
}

.cm-s-default .cm-string-2 {
  color: var(--fg-code-string-2);
}

.cm-s-default .cm-meta {
  color: var(--fg-code-meta);
}

.cm-s-default .cm-qualifier {
  color: var(--fg-code-qualifier);
}

.cm-s-default .cm-builtin {
  color: var(--fg-code-builtin);
}

.cm-s-default .cm-bracket {
  color: var(--fg-code-bracket);
}

.cm-s-default .cm-tag {
  color: var(--fg-code-tag);
}

.cm-s-default .cm-attribute {
  color: var(--fg-code-attribute);
}

.cm-s-default .cm-hr {
  color: var(--fg-code-hr);
}

.cm-s-default .cm-link {
  color: var(--fg-code-link);
}

.cm-s-default .cm-error {
  color: var(--fg-code-error);
}

.cm-invalidchar {
  color: var(--fg-code-invalidchar);
}

Fonts

Preview

//// Declare a Closure
let fullName = { (firstName:String, lastName:String)->String in
    return firstName + " " + lastName
}
// Call Closure
let myFullName = fullName("Sergey", "Kargopolov")
print("My full name is \(myFullName)")

CSS

code,
.CodeMirror .CodeMirror-code pre {
  font-family: var(--fnt-code);
  font-size: var(--fnt-size-code);
  font-style: normal!important;
}

.CodeMirror-linenumber.CodeMirror-gutter-elt {
  font-family: var(--fnt-code);
}

Embed

.rm-embed-container {
  background-color: var(--bg-embed-1);
}
.rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-2);
}
.rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-3);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-4);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-5);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-1);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-2);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-3);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-4);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-5);
}
.rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container {
  background-color: var(--bg-embed-1);
}

HR

.rm-hr {
  border: 1px solid var(--br-hr);
}

Kanban

.kanban-board {
  background-color: var(--bg-kanban-board);
}

.kanban-column {
  background-color: var(--bg-kanban-column);
  border-right: 1px solid var(--br-kanban-column);
}

.kanban-card {
  background-color: var(--bg-kanban-card);
  color:            var(--fg-kanban-card);
}

.kanban-title {
  border-bottom: 1px solid var(--br-kanban-board);
}

Mermaid

.bp3-card {
  background-color: var(--bg-mermaid);
}

.node rect, 
.node circle, 
.node ellipse, 
.node polygon, 
.node path {
  fill: var(--bg-mermaid-node)!important;
  stroke: var(--br-mermaid-node)!important;
}

.node .label {
  color: var(--fg-mermaid-label)!important;
}

Pomodoro

.rm-pomodoro {
  background: var(--bg-pomodoro)!important;
  border: 1px solid var(--br-pomodoro);
  color: var(--fg-pomodoro);
}

.rm-pomodoro span {
  color: var(--fg-pomodoro);
}

.rm-pomodoro.running {
  background: var(--bg-pomodoro-running)!important;
  color: var(--fg-pomodoro-running)!important;
  border: 1px solid var(--br-pomodoro-running);
}

.rm-pomodoro.break {
    background: var(--bg-pomodoro-break) !important;
    border: 1px solid var(--br-pomodoro-break);
    color: var(--bg-pomodoro-break) !important;
}

Queries

.rm-query {
  border: 0.5px solid var(--br-query);
}

.rm-query .rm-query-title {
  background-color: var(--bg-query-title);
  color: var(--fg-query-title);
}

Quotes

.rm-bq {
  background-color: var(--bg-quote);
  color: var(--fg-quote);
  border-left: 5px solid var(--br-quote);
  font-size: var(--fnt-size-quote);
  font-style: var(--fnt-style-quote);
}

Tables

.roam-table th, 
.roam-table td, 
.roam-table tr {
  border: 1px solid var(--br-table);
}

Todo

.checkmark {
  border: 1px solid var(--br-checkbox);
}

.check-container input:checked ~ .checkmark {
  background-color: var(--bg-checkbox-checked);
}

.check-container .checkmark:after {
  border: solid var(--br-checkmark);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(40deg) scale(0.8);
}

Versions

.version-bullet {
  background-color: var(--bg-version-bullet)!important;
}

.rm-select-version-button.rm-button-selected {
  color: var(--fg-version-selected);
}

.roam-block-container .rm-block-main .rm-version-choice-wrapper .rm-version-choice {
  border-bottom: 0.5px solid var(--br-version);
}

Viktor Tabori

Viktor's Zenith Version Theme

@import url('https://thesved.github.io/css/roamCSS-auto.css') (max-width:600px);

Other Viktor's Zenith Fixes

CSS Resizing Feature Fix

/* FIXING resizable interface */

/* fix: collapsed sidebar windows by @_robertkirk */
.window-headers:only-child {
  text-orientation: mixed;
  writing-mode: vertical-lr;
}

/* left sidebar fix */
.roam-sidebar-container {
  padding-left: 45px;
}

@media only screen and (max-width: 600px) {
  .roam-sidebar-container {
    padding-left: 0;
  }
}


/* fix resizing */
.roam-body .roam-app .roam-main {
  overflow-x:hidden;
  flex-direction: row !important;
  max-width: var(--page-width) !important;
}

@media only screen and (max-width: 600px) {
  .roam-body .roam-app .roam-main {
    flex: 0 0 auto!important;
  }
  
  .roam-body .roam-app .roam-body-main {
    flex: 0 0 auto!important;
  }
}

/* main panel size fix */
.roam-body .roam-app .roam-body-main {
  flex: 0 0 100%!important;
  padding-left: 55px;
}

.roam-body .roam-app .roam-body-main > [style*="padding-right"] {
  max-width: 100%!important;
  padding-left:unset!important;
  padding-right:unset!important;
}

.rm-block-text {
  max-width: 100%!important;
}

/* make the main panel scroll */
.roam-app > .flex-h-box {
  overflow-x: scroll;
}

.roam-article {
  max-width: 100%;!important;
  overflow-x: hidden;
}

/* right sidebar fix */
#right-sidebar {
  flex: 0 0 auto!important;
}

#right-sidebar .rm-resize-handle {
  left:-4px!important; /* in the original code this has set to -4 which is invalid */
}

#roam-right-sidebar-content {
  flex: 0 0 auto!important;
  overflow: scroll;
}

#roam-right-sidebar-content .sidebar-content > * {
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 45px;
}

/* right sidebar header fixes */
#roam-right-sidebar-content .window-headers {
  margin-left: 5px!important;
  flex-direction: row !important;
  align-items: center!important;
  position: relative!important;
}

#roam-right-sidebar-content .window-headers .bp3-icon-cross {
  order: 1!important;
  margin-right: 10px;
}

#roam-right-sidebar-content .window-headers > :nth-child(1) {
 order: 2;
}

#roam-right-sidebar-content .window-headers > :nth-child(2) {
 order: 3;
}

#roam-right-sidebar-content .window-headers button.bp3-small {
  color: var(--text-color);
  order: 4;
}

#roam-right-sidebar-content .window-headers > [style*="0px"] {
 order: 5;
}

#roam-right-sidebar-content .sidebar-content > * > * {
  padding-right: 10px!important;
}

/* sidebar title editing */
.rm-sidebar-outline .rm-title-editing-display {
    display: inline-block;
}
.rm-sidebar-outline .rm-title-editing-display textarea {
    margin-left: 0!important;
}

/* visualize the right sidebar resize-handle */
.rm-resize-handle:hover, .rm-resize-handle:focus {
    background-color: #66666640;
}

Viktor's Mobile Bottom Menu

/*
 * Viktor's Mobile Bottom Menu
 * version: 0.1
 * author: @ViktorTabori
 * 
 * Add to your roam/css page.
 */

@media only screen and (max-width: 600px) {
    .roam-topbar {
        top:unset;
        bottom:0px;
    }

    #find-or-create-input:focus {
        top: 70px;
    }

    .rm-find-or-create-wrapper .bp3-overlay,
    .rm-find-or-create-wrapper .bp3-transition-container
    {
        top: 111px!important;
    }

    #rm-mobile-bar {
        bottom: 40px;
        z-index: 10;
    }

Azlen Themes

Zenith

@import url('https://azlen.github.io/roam-themes/zenith.css');

Viktor's Fix

@import url('https://thesved.github.io/css/roamCSS.css');

Yggdrasil

@import url('https://azlen.github.io/roam-themes/yggdrasil.css');

Cosmonaut

@import url('https://azlen.github.io/roam-themes/cosmonaut.css');

Referenced in

roam/css