dracula.css

/*
Dracula Theme for Roam Research v0.8.2.
Install with the Stylus extension for Chrome or Firefox.
*/

:root {
  /* Dracula color palette */
  --blue:   #8be9fd;
  --green:  #50fa7b; 
  --orange: #ffb86c;
  --pink:   #ff79c6;
  --purple: #bd93f9;
  --red:    #ff5555;
  --yellow: #f1fa8c;

  /* Dracula black & white colors */
  --background:   #282a36;
  --current-line: #44475a;
  --foreground:   #f8f8f2;
  --comment:      #6272a4;

  /* Other UI colors */
  --dark-blue:    #29454B;
  --dark-yellow:  #606438;
  --background2:  #333545;
  --foreground2:  #BDCAD4;
  --search-input: #e4e9ed;
  --search-hover: #d5dadf;
  --bullet-outer: #6c6f75;
  --bullet-inner: #D8DEE9;
  --column-title: #818D9B;
}


/* Body, topbar, sidebar */

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

.roam-body-main {
  background-color: var(--background);
  color: var(--foreground);
}

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

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

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

.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 .log-button,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper,
.roam-body .roam-app .roam-sidebar-container > * {
  color: var(--foreground2);
  opacity: 0.9;
}

.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: var(--current-line);
  color: var(--foreground);
  opacity: 0.9;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button .bp3-button:hover {
  background-color: var(--foreground);
}

.roam-block-container button {
  background-color: var(--current-line);
  color: var(--foreground);
  border-color: var(--background2);
}


/* Button */

.bp3-button.bp3-minimal {
  color: var(--foreground);
}

.bp3-button.bp3-minimal.bp3-small {
  color: var(--comment); 
}

.roam-block .bp3-button {
  background-color: var(--background2);
  color: var(--foreground2);
  background-image: none;
}

.roam-block .bp3-button:hover {
  background-color: var(--current-line);
  color: var(--foreground);
}

.dont-focus-block.bp3-button {
  background-color: var(--background2);
  color: var(--foreground2);
  background-image: none;
}

.dont-focus-block.bp3-button:hover {
  background-color: var(--current-line);
  color: var(--foreground);
}

/* Heading */

.rm-level3 {
  color: var(--foreground2);
}


/* Right sidebar */

#right-sidebar > div {
  background-color: var(--background2);
  color: var(--foreground)
}


/* Buffer (the help window in the bottom right corner) */

#buffer {
  background-color: var(--current-line) !important;
  color: var(--foreground) !important;
}


/* Highlights */

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

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

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

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

/* Toast messages */

.bp3-toast.bp3-intent-success {
  background-color: var(--green);
}

.bp3-toast.bp3-intent-warning {
  background-color: var(--orange);
}


/* Sync icon */

.rm-sync__icon.rm-sync--synced {
  background-color: var(--green);
  opacity: 1;
}

.rm-sync__icon.rm-sync--saving-remote {
  background-color: var(--orange);
  opacity: 1;
}


/* External links */

a {
  color: var(--blue);
}

a:hover {
  color: var(--blue);
}


/* Reference links */

.rm-bq { /* block quote */
  background-color: var(--background2);
}

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

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

.rm-inline-references {
  background-color: var(--current-line);
}

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

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

.rm-page-ref--namespace {  
  color: var(--purple);
}

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


/* Reference pages */

.rm-ref-page-view-title span {
  color: var(--pink);
}

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

.parent-path-wrapper {
  color: var(--foreground2);
}

.bp3-icon-standard {
  color: var(--foreground2);
}


/* Bullet points & indent lines */

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

.rm-bullet.rm-bullet--closed .rm-bullet__inner {
  border: 4px solid var(--bullet-outer);
  margin-top: 2px;
}

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

.rm-multibar {
  border-right: 1px solid var(--comment);
}

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


/* All Pages table */

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

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

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

.rm-pages-title-col span {
  color: var(--column-title);
}

.rm-pages-col span {
  color: var(--column-title);
}

.rm-pages-title-col span.sorted-header-text {
  color: var(--foreground2);
}

.rm-pages-col span.sorted-header-text {
  color: var(--foreground2);
}

.sorting-button-group .focused::before {
  color: var(--foreground2);
}

.rm-pages-title-col a.rm-pages-title-text:hover {
  color: var(--foreground2);
}

.rm-pages-title-col span.title-children-text {
  color: var(--comment); 
}


/* All Pages checkmarks */

.bp3-control.bp3-checkbox .bp3-control-indicator {
  background-color: var(--current-line);
  border-color: var(--background2);
  background-image: none;
} 

.bp3-control.bp3-checkbox input:active ~ .bp3-control-indicator {
  background-color: var(--bullet-outer);
}

.bp3-control.bp3-checkbox input:not(:disabled):active:checked ~ .bp3-control-indicator {
  background-color: var(--bullet-outer);
}

.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator {
  background-color: var(--dark-yellow);
} 

/* Mentions in All Pages */

.rm-clickable-pill.empty-pill {
  color: var(--foreground);
  background-color: var(--background);
}

.rm-clickable-pill {
  color: var(--background);
  background-color: var(--blue);
  opacity: 0.7;
}

.rm-clickable-pill.level1-pill {
  color: var(--background);
  background-color: var(--blue);
  opacity: 0.8;
}

.rm-clickable-pill.level2-pill {
  color: var(--background);
  background-color: var(--blue);
  opacity: 0.9;
}

.rm-clickable-pill.level3-pill {
  color: var(--background);
  background-color: var(--blue);
  opacity: 1;
}


/* Find or Create Page search box */

.bp3-input {
  background-color: var(--search-input);
  color: var(--background);
}

.bp3-menu {
  background-color: var(--search-input) !important;
  color: var(--current-line) !important;
}

.bp3-menu div:hover {
  background-color: var(--search-hover);
}

.rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page {
  color: var(--pink); 
}

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

.rm-find-or-create-wrapper .rm-menu-item ul {
  color: var(--comment);
}


/* Hover window triggered by autocompletion */

.bp3-elevation-3 {
  background-color: var(--current-line) !important;
  color: var(--foreground);
}

.bp3-elevation-3 .dont-unfocus-block[style~="background-color:"] {
  background-color: var(--comment) !important;
}


/* Date picker */

.bp3-datepicker{
  background-color: var(--current-line);
  color: var(--foreground2);
}

.bp3-html-select.bp3-minimal.bp3-datepicker-month-select > select,
.bp3-html-select.bp3-minimal.bp3-datepicker-year-select > select {
  color: var(--foreground2);
}


/* Kanban board */

.kanban-board {
  background-color: #6c6f75;
}

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

.kanban-column {
  background-color: var(--background2);
}

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


/* Filter tooltip */

.bp3-tooltip .bp3-popover-content {
  background-color: var(--current-line);
  color: var(--foreground);
}

.bp3-popover .bp3-popover-content {
  background-color: var(--current-line);
  color: var(--foreground);
}

.bp3-popover-arrow {
  color: var(--current-line);
}

.bp3-popover .bp3-popover-content .bp3-button {
  background-color: var(--background2) !important;
  color: var(--foreground) !important;
  background-image: none;
  box-shadow: none;
}


/* Embed containers */

.rm-embed-container{
  background-color: var(--background2);
}

.rm-embed-container .rm-embed-container {
  background-color: var(--current-line);
}


/* Checkmarks */

.checkmark {
  background-color: var(--current-line);
  border-color: var(--background2);
}

.check-container input:active ~ .bp3-control-indicator {
  background-color: var(--bullet-outer);
}

.check-container input:not(:disabled):active:checked ~ .bp3-control-indicator {
  background-color: var(--bullet-outer);
}

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


/* Sliders */

.bp3-slider-progress.bp3-intent-primary {
  background-color: var(--yellow);
}

.bp3-slider-handle {
  background-color: var(--bullet-outer);
  background-image: none;
}

.bp3-slider-handle .bp3-slider-label {
  background-color: var(--bullet-inner);
  color: var(--background2);
}


/* Inline code blocks with*/

code {
  color: var(--orange);
  background-color: var(--current-line);
  border-color: var(--current-line);
}


/* Multiline code blocks with */

.bp3-popover-text {
  color: var(--foreground);
}

.rm-code-block {
  background-color: var(--background);
  color: var(--foreground);
  border: 2px solid var(--background2);
}

.cmt-scrollbar-filler,
.cmt-gutter-filler {
  background-color: var(--background);
}

.cm-scroller .cm-gutters {
  border-right: 1px solid var(--background);
  background-color: var(--background);
}

.cm-gutterElement {
  color: var(--comment);
}
.cm-gutterElement.cm-activeLineGutter {
  background-color: var(--current-line) !important;
}

.cmt-guttermarker {
  color: var(--background);
}

.cmt-guttermarker-subtle {
  color: var(--comment);
}

.cmt-cursor {
  border-left: 1px solid var(--foreground);
}

.cm div.cmt-secondarycursor {
  border-left: 1px solid var(--current-line);
}

.cmt-fat-cursor .cmt-cursor {
  background: var(--bullet-inner);  /* best guess */
  color: var(--bullet-outer);       /* best guess */
}

.cmt-ruler {
  border-left: 1px solid var(--current-line);
}

.cmt-header {
  color: var(--blue);
}

.cmt-quote {
  color: var(--green);  /* best guess */
}

.cmt-negative {
  color: var(--red);  /* best guess */
}

.cmt-positive {
  color: var(--green);  /* best guess */
}

.cmt-keyword {
  color: var(--pink);
}

.cmt-atom {
  color: var(--purple);
}

.cmt-number {
 color: var(--purple);
}

.cmt-def {
 color: var(--blue);
}

.cmt-variable-2 {
 color: var(--orange);
}

.cmt-variable-3,
.cmt-typeName {
 color: var(--green);
}

.cmt-comment {
  color: var(--comment);
}

.cmt-string {
  color: var(--yellow);
}

.cmt-string-2 {
  color: var(--yellow);  /* best guess */
}

.cmt-meta {
  color: var(--bullet-outer);  /* best guess */
}

.cmt-qualifier {
  color: var(--green);
}

.cmt-builtin {
  color: var(--green);
}

.cmt-bracket {
  color: var(--bullet-inner);  /* best guess */
}

.cmt-labelName {
  color: var(--pink);
}

.cmt-attribute {
  color: var(--green);
}

.cmt-hr {
  color: var(--bullet-inner);  /* best guess */
}

.cmt-link {
  color: var(--blue);
}

.cmt-error {
  color: var(--foreground);
}

.cmt-invalidchar {
  color: var(--red);
}

div.cm span.cmt-matchingbracket {
  color: var(--foreground);
}

div.cm span.cmt-nonmatchingbracket {
  color: var(--red);
}

.cmt-matchingtag {
 background: var(--orange);  /* best guess */
}

.cm-activeLine.cm-line {
 background: var(--current-line) !important;
}

.cmt-selected {
  background: var(--current-line);
}

.cmt-focused .cmt-selected {
  background: var(--current-line);
}

.cmt-line::selection,
.cmt-line>span::selection,
.cmt-line>span>span::selection {
  background: var(--current-line);
}

.cmt-line::-moz-selection,
.cmt-line>span::-moz-selection,
.cmt-line>span>span::-moz-selection {
  background: var(--current-line);
}

.cmt-searching {
  background-color: var(--dark-yellow);  /* best guess */
}

.ͼi {
    color: var(--green);
}
.ͼc {
    color: var(--purple);
}
.ͼl {
    color: var(--comment);
}
 

/* Intercom app */

.intercom-app,
.intercom-launcher-frame,
#intercom-container {
  display: none !important;
}