Roam Midnight — A clean, automatic dark/light theme for Roam Research.

midnight.css

:root {
--font-sans: 'Inter', 'Inter var', sans-serif;
--font-mono: ui-monospace, 'IBM Plex Mono', "JetBrains Mono", monospace;
--subtle-border-color: rgba(0, 0, 0, 0.07);
--cards-background-color: #ffffff;
--secondary-background-color: hsl(210, 9%, 95%);
}

body, input, textarea, select, button, div {
font-family: var(--font-sans) !important;
}

.intercom-launcher,
#intercom-frame,
#intercom-container,
.intercom-lightweight-app,
#roam-sidebar-logo,
#app div div div div div.flex-v-box.starred-pages-wrapper div.flex-h-box {
display: none !important;
}

span sub,
span code,
code, pre, q, tt {
font-size: 14px !important;
font-family: var(--font-mono) !important;
}

.CodeMirror,
.CodeMirror * {
font-size: 14px !important;
font-family: var(--font-mono) !important;
}

.roam-body .roam-app .roam-main .roam-article .roam-log-container,
#rm-log-container,
.roam-center > div:first-child {
padding-right: 0 !important;
padding-left: 0 !important;
}

.zoom-path-view {
margin-top: 8px !important;
}

.roam-body .roam-app .roam-main .roam-article {
padding: 0 0 120px 0 !important;
}


.roam-article .rm-reference-main,
.roam-article > div:first-child {
padding-left: 42px !important;
padding-right: 42px !important;
}

/*
.roam-body .roam-app .roam-main .roam-article {
padding-left: 42px !important;
padding-right: 42px !important;
}
*/


.roam-log-container .roam-log-page {
  padding-right: clamp(42px, 200px, 10%) !important;
  padding-left: clamp(42px, 200px, 10%) !important;
}

.roam-article .roam-log-container .rm-reference-main {
padding-left: 0 !important;
padding-right: 0 !important;
}

.roam-body .roam-app .roam-sidebar-container {
border-right: 1px solid #202B33 !important;
}

.starred-pages-wrapper {
border-top: 1px solid #202B33 !important;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper {
margin-top: 16px !important;
}

span sub + button {
position: relative;
top: 4px;
font-family: var(--font-mono) !important;
background: #ffffff !important;
margin-left: 5px !important;
padding: 0 8px !important;
border: 1px solid rgba(0,0,0,0.5) !important;
border-radius: 4px !important;
}

span sub + button:before {
content: "toggle" !important;
padding: 0 !important;
font-family: var(--font-mono) !important;
font-size: 10px !important;
text-transform: uppercase !important;
}

.bp3-button sub {
font-family: var(--font-mono) !important;
color: #9099a1 !important;
margin: 0 5px !important;
}

#block-input-ghost > span[style] {
color: #9099a1 !important;
}

.rm-level1 {
position:relative;
top: -8px;
}

.rm-level2 {
position:relative;
top: -3px;
}

.rm-level1 span.checkmark {
top: -4px;
}

.rm-title-editing-display textarea[style] {
margin-top: -20px !important;
margin-bottom: 10px !important;
}

.rm-page-ref--tag {
background: rgb(16,107,163, 0.25) !important;
color: hsl(206,23%,13%) !important;
border-radius: 20px !important;
padding: 2px 8px !important;
}

.rm-page-ref--tag:hover {
text-decoration: none !important;
background: rgb(16,107,163, 0.5) !important;
color: #000000 !important;
}

.rm-reference-item {
margin-bottom: 1rem !important;
padding: 18px 6px !important;
border: 1px solid #CDD8E0 !important;
}

.block-highlight-blue {
background-color: rgba(124,204,255,0.5) !important;
}

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

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .rm-db-title .icon {
border: none !important;
height: 20px !important;
width: 20px !important;
}

.roam-sidebar-container .rm-db-title-container .rm-db-title {
padding-left: 0.2rem !important;
padding-right: 0.5rem !important;
}

.roam-log-container .roam-log-page:first-child {
border: none !important;
}

.roam-log-container .roam-log-page {
border-top: 1px solid rgba(205,216,224,0.5) !important;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .shortcut {
padding-left: 20px;
}

#roam-right-sidebar-content .level2,
.level2 {
font-family: var(--font-sans) !important;
font-size: 24px !important;
font-weight: 450 !important;
}

.h1, h1 {
font-size: 28px !important;
font-weight: 600 !important;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper {
padding: 0 !important;
margin-top: 8px !important;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button {
color: hsl(207,16%,73%) !important;
}

.starred-pages-wrapper div[style]:first-child {
opacity: 0.25 !important;
}

.starred-pages a .page {
padding: 8px 20px 8px 20px !important;
}

iframe { border: none !important; }

.roam-topbar {
background: transparent !important;
}

.roam-sidebar-container .bp3-popover-target .bp3-button.bp3-minimal .bp3-icon {
border: none !important;
height: 28px !important;
width: 28px !important;
box-shadow: 0 0 3px rgba(0,0,0,0.25) !important;
}

#buffer {
background-color: transparent !important;
right: 15px !important;
bottom: 15px !important;
}

#buffer > div {
background: #0C1013 !important;
box-shadow: 0 2px 14px rgba(0,0,0,0.75) !important;
}
.bp3-icon-help { color: transparent !important; }
.bp3-button.bp3-minimal:hover { background: transparent !important; }

.zoom-path-view .rm-zoom-mask {
background: none !important;
color: #ffffff !important;
}

.roam-log-preview .level2 + div {
font-family: var(--font-mono) !important;
padding-top: 1rem !important;
}

.roam-sidebar-container .rm-db-title-container:hover {
border-radius: 3px !important;
background: none !important;
}

.starred-pages-wrapper {
border-top: none !important;
}

#block-input-ghost {
opacity: 0.33 !important;
}

div#roam-right-sidebar-content span > a:not(.rm-alias-page):after,
div.roam-article span > a:not(.rm-alias-page):after {
content: "";
display: inline-block;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyBmaWxsPSIjMzM3QUI3Ij48cGF0aCBkPSJNNiAxMmwxLjA2NTgxZS0xNCAxLjUwOTk2ZS0wN2M4LjMzOTI3ZS0wOC41NTIyODUuNDQ3NzE1IDEgMSAxaDkuNWwtNC4zNzExNGUtMDgtMS43NzYzNmUtMTVjLjU1MjI4NSAyLjQxNDExZS0wOCAxLS40NDc3MTUgMS0xIDIuNDE0MTFlLTA4LS41NTIyODUtLjQ0NzcxNS0xLTEtMWgtOS41bC00LjM3MTE0ZS0wOCAzLjU1MjcxZS0xNWMtLjU1MjI4NSAyLjQxNDExZS0wOC0xIC40NDc3MTUtMSAxIDAgMCAwIDguODgxNzhlLTE1IDAgOC44ODE3OGUtMTVaIj48L3BhdGg+PHBhdGggZD0iTTguMiAxNC43MjJsMS4wMDg3OWUtMDctOC4yMjU5MWUtMDhjLS42MjEwMzguNTA2NDA2LTEuMzk4NjcuNzgxNDA3LTIuMi43NzhsLTEuNTI5OWUtMDctMy41NTI3MWUtMTVjLTEuOTMzLTguNDQ5NGUtMDgtMy41LTEuNTY3LTMuNS0zLjUgOC40NDk0ZS0wOC0xLjkzMyAxLjU2Ny0zLjUgMy41LTMuNWwxLjM2NDc3ZS0wNy01LjAzNzkzZS0xMGMuODAxNDIxLS4wMDI5NTgzNSAxLjU3OTAyLjI3MjM4MSAyLjIuNzc5bC0zLjY2NDA2ZS0wOC0yLjk2MDQzZS0wOGMuNDI5OTU0LjM0NzM4NyAxLjA2MDExLjI4MDQ1MyAxLjQwNzUtLjE0OTUgLjM0NzM4Ny0uNDI5OTU0LjI4MDQ1My0xLjA2MDExLS4xNDk1LTEuNDA3NWw4LjE3MTUxZS0wOCA2LjYwMjcxZS0wOGMtMi4zNjI2Ny0xLjkwOTA4LTUuODI1NjEtMS41NDEzNy03LjczNDY5LjgyMTMwOCAtMS45MDkwOCAyLjM2MjY3LTEuNTQxMzcgNS44MjU2MS44MjEzMDggNy43MzQ2OSAyLjAxNjQ2IDEuNjI5MzMgNC44OTY5MiAxLjYyOTMzIDYuOTEzMzggMS4zMjA1NGUtMDdsLTEuNTM0OThlLTA4IDEuMjQxMDFlLTA4Yy40Mjk2NzgtLjM0NzM4Ny40OTYzODctLjk3NzMyMi4xNDktMS40MDcgLS4zNDczODctLjQyOTY3OC0uOTc3MzIyLS40OTYzODctMS40MDctLjE0OVoiPjwvcGF0aD48cGF0aCBkPSJNMTggNi41bC04LjUxNDdlLTA4IDEuMDI1NTFlLTEwYy0xLjI1ODM5LjAwMTUxNTYyLTIuNDc4NDcuNDMzMDI2LTMuNDU4IDEuMjIzbC0xLjExOTYzZS0wOSA5LjA1NzgzZS0xMGMtLjQyOTQwMS4zNDczODctLjQ5NTg4Ny45NzcwOTktLjE0ODUgMS40MDY1IC4zNDczODcuNDI5NDAxLjk3NzA5OS40OTU4ODcgMS40MDY1LjE0ODVsMS4xMTc2OGUtMDgtOS4xMDk5NWUtMDljLjYyMTEyLS41MDYyNTkgMS4zOTg3LS43ODEyNDEgMi4yLS43NzhsLTEuNTI5OWUtMDcgMy41NTI3MWUtMTVjMS45MzMtOC40NDk0ZS0wOCAzLjUgMS41NjcgMy41IDMuNSA4LjQ0OTRlLTA4IDEuOTMzLTEuNTY3IDMuNS0zLjUgMy41bC0xLjY3NDk0ZS0wNyA3LjcxMThlLTEwYy0uODAxMjAzLjAwMzY4ODkxLTEuNTc4ODMtLjI3MDk1My0yLjItLjc3N2w1LjIzNjA2ZS0wOCA0LjIzMzI2ZS0wOGMtLjQyOTY3OC0uMzQ3Mzg3LTEuMDU5NjEtLjI4MDY3OC0xLjQwNy4xNDkgLS4zNDczODcuNDI5Njc4LS4yODA2NzggMS4wNTk2MS4xNDkgMS40MDdsMS41NDU4OGUtMDcgMS4yNDgzNmUtMDdjMi4zNjMyMyAxLjkwODM5IDUuODI2MDYgMS41Mzk2OCA3LjczNDQ1LS44MjM1NDggMS45MDgzOS0yLjM2MzIzIDEuNTM5NjgtNS44MjYwNi0uODIzNTQ4LTcuNzM0NDUgLS45Nzc2ODEtLjc4OTUxNC0yLjE5NjI1LTEuMjIwNDItMy40NTI5MS0xLjIyMVoiPjwvcGF0aD48L2c+PC9zdmc+);
transform: rotate(-45deg);
background-size: 15px 15px;
width: 15px;
height: 15px;
margin: 0 2px 0 3px;
position: relative;
bottom: -2px;
left: -1px; }
div.roam-article .rm-level1 span > a:not(.rm-alias-page):after {
background-size: 20px 20px;
width: 20px;
height: 20px; }
div.roam-article .rm-level2 span > a:not(.rm-alias-page):after {
background-size: 18px 18px;
width: 18px;
height: 18px; }
div.roam-article .rm-level3 span > a:not(.rm-alias-page):after {
background-size: 16px 16px;
width: 16px;
height: 16px; }

.kanban-board {
max-width: 100% !important;
padding: 0 !important;
background: none !important;
}
.kanban-board .kanban-column {
border-radius: 6px !important;
padding: 0 !important;
margin: 0 !important;
}
.kanban-board .kanban-column:not([style*=background]) {
background: transparent !important;
}
.kanban-board .kanban-column[style*=background] {
background: var(--secondary-background-color) !important;
}
.kanban-board .kanban-column .kanban-title {
text-align: left !important;
border-bottom: 1px solid var(--subtle-border-color) !important;
padding: 2px 8px !important;
min-height: 31px;
max-height: 31px;
font-size: 14px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-board .kanban-column .kanban-card {
background: var(--cards-background-color) !important;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 4px 7px -1px rgba(0, 0, 0, 0.07) !important;
border-radius: 4px !important;
padding: 6px 10px !important;
margin: 0px 6px 12px !important;
font-size: 14px !important;
}
.kanban-board .kanban-column .kanban-card .check-container {
margin-bottom: 8px !important;
}

.rm-bullet--numbered {
  margin-right: 10px !important;
  padding-right: 10px !important;
  padding-left: 0 !important;
}

@media (prefers-color-scheme: dark) {
:root {
  background-color: hsl(206,23%,13%);
  --subtle-border-color: rgba(255, 255, 255, 0.07);
  --cards-background-color: #202B33;
  --secondary-background-color: hsl(206,23%,94%);
}

body {
  background: #0D1013 !important;
}

.roam-app {
  background-color: hsl(206,23%,94%) !important;
  border-top: 1px solid #CDD8E0 !important;
}
  
.rm-search-path {
  background-color: hsl(206,23%,13%) !important;
  color: hsl(206,23%,94%) !important;
  border: 1px solid hsl(205,23%,16%) !important;
}

.bp3-portal .bp3-menu {
  border: 1px solid #CDD8E0 !important;
}

#buffer > div,
.bp3-portal .bp3-popover-content {
  background: hsl(210,22%,6%) !important;
}

.rm-block-main .bp3-button,
.rm-search-path-query-input,
.rm-query,
code,
.bp3-portal .bp3-menu,
.roam-block,
.roam-article textarea,
.roam-app,
#buffer > div,
.CodeMirror,
.roam-sidebar-container,
.rm-db-title-container .bp3-popover {
  filter: invert(1) hue-rotate(180deg) !important;
}
  
.bp3-menu .bp3-menu {
  filter: invert(0) hue-rotate(0deg) !important;
}

.rm-highlight {
  background-color: #AC9513 !important;
}

.block-border-left {
  border-left: 1px solid #CDD8E0 !important;
}

.parent-path-wrapper .rm-page-ref--tag,
.rm-reference-item .parent-path-wrapper .rm-page-ref--tag,
.rm-reference-item .rm-page-ref--tag {
  color: hsl(206,23%,13%) !important;
}

.rm-reference-item .rm-page-ref--tag,
.rm-page-ref--tag,
.rm-page-ref--tag:hover {
  color: #CDD8E0 !important;
}

.rm-reference-main .rm-reference-container div[style],
.rm-reference-main .flex-h-box strong[style] {
  color: rgba(92,112,128,0.5) !important;
}

#right-sidebar {
 border-left: 1px solid #cdd8e0 !important;
 border-right: 1px solid #cdd8e0 !important;
 border-bottom: 1px solid #cdd8e0 !important;
}

#right-sidebar,
.rm-reference-item {
  background-color: #ffffff !important;
}

.rm-block-ref:hover {
  background-color: #000000 !important;
}

#roam-right-sidebar-content > .sidebar-content > div > div[style] {
  border-color: #cdd8e0 !important;
}

.roam-article textarea,
.roam-block {
  color: #CDD8E0 !important;
}

.roam-block blockquote {
  background-color: hsl(206,23%,3%) !important;
  margin-block-end: 0 !important;
}

.roam-block .rm-paren {
  background-color: hsl(206,23%,3%) !important;
  border: 2px solid hsl(206,23%,13%) !important;
}

.roam-topbar .bp3-popover,
.bp3-input,
.bp3-elevation-3 {
  border: 1px solid #CDD8E0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.bp3-popover-content > .bp3-menu > div[style] {
  color: hsl(206,23%,13%) !important;
}

.roam-article .bp3-button .bp3-button-text {
  color: #ffffff !important;
}

.roam-log-container .roam-log-preview:hover {
  background-color: rgba(255,255,255,0.5);
}

.roam-log-container .roam-log-page {
  border-top: 1px solid #CDD8E0 !important;
}

span sub + button {
  background: #000000 !important;
  border: 1px solid hsl(206,23%,13%) !important;
}

}