My personal Logseq Dracula theme customizations (based on oficial dracula theme)

custom.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); 
  
 :root { 
   --background: #282a36; 
   --light-background: #343746; 
   --lighter-background: #424450; 
   --dark-background: #21222c; 
   --darker-background: #191a21; 
   --foreground: #f8f8f2; 
   --current-line: #44475a; 
   --comment: #6272a4; 
   --white: var(--foreground); 
   --white-hover: #f8f8f280; 
   --red: #ff5555; 
   --orange: #ffb86c; 
   --yellow: #f1fa8c; 
   --green: #50fa7b; 
   --purple: #bd93f9; 
   --purple-hover: #bf93f980; 
   --cyan: #8be9fd; 
   --cyan-hover: #8be9fd80; 
   --pink: #ff79c6; 
   --pink-hover: #ff79c680; 
  
   --ls-tag-text-opacity: 0.8; 
   --ls-tag-text-hover-opacity: 0.8; 
   --ls-page-text-size: 16px; 
   --ls-page-title-size: 36px; 
   --ls-font-family: "Fira Sans"; 
   --ls-font-weight-light: 300; 
   --ls-font-weight-regular: 400; 
   --ls-font-weight-medium: 500; 
   --ls-font-letter-spacing: 0.002em; 
   --ls-font-line-height: 1.5; 
  
   --ls-border-radius-low: 3px; 
   --ls-border-radius-medium: 6px; 
 } 
  
 .dark-theme, 
 html[data-theme="dark"] { 
   --ls-primary-background-color: var(--background); 
   --ls-secondary-background-color: var(--dark-background); 
   --ls-tertiary-background-color: var(--light-background); 
   --ls-quaternary-background-color: var(--light-background); 
   --ls-quinary-background-color: var(--darker-background); 
  
   --ls-active-primary-color: var(--foreground); 
   --ls-active-secondary-color: var(--foreground); 
  
   --ls-primary-text-color: var(--foreground); 
   --ls-secondary-text-color: var(--white-hover); 
  
   --ls-search-background-color: var(--background); 
   --ls-border-color: var(--comment); 
   --ls-secondary-border-color: var(--ls-border-color); 
   --ls-menu-hover-color: var(--light-background); 
   --ls-table-tr-even-background-color: var(--light-background); 
  
   --ls-head-text-color: var(--foreground); 
   --ls-title-text-color: var(--foreground); 
  
   --ls-link-text-color: var(--pink); 
   --ls-link-text-hover-color: var(--pink-hover); 
  
   --ls-link-ref-text-color: var(--pink); 
   --ls-link-ref-text-hover-color: var(--pink-hover); 
   --ls-block-ref-link-text-color: var(--ls-border-color); 
  
   --ls-tag-text-color: var(--purple); 
   --ls-tag-text-hover-color: var(--purple-hover); 
  
   --ls-block-bullet-border-color: var(--current-line); 
   --ls-block-bullet-color: var(--foreground); 
   --ls-block-highlight-color: var(--current-line); 
   --ls-block-properties-background-color: var(--light-background); 
  
   --ls-page-checkbox-color: transparent; 
   --ls-page-checkbox-border-color: var(--comment); 
  
   --ls-page-blockquote-color: var(--foreground); 
   --ls-page-blockquote-bg-color: var(--light-background); 
   --ls-page-blockquote-border-color: var(--yellow); 
   --ls-page-properties-background-color: var(--light-background); 
  
   --ls-page-inline-code-color: var(--green); 
   --ls-page-inline-code-bg-color: var(--background); 
  
   --ls-scrollbar-background-color: var(--background); 
   --ls-scrollbar-foreground-color: var(--darker-background); 
   --ls-scrollbar-thumb-hover-color: var(--light-background); 
  
   --ls-icon-color: var(--white-hover); 
   --ls-search-icon-color: var(--white-hover); 
   --ls-a-chosen-bg: var(--light-background); 
   --ls-right-sidebar-code-bg-color: var(--light-background); 
   --ls-selection-background-color: var(--comment); 
   --ls-slide-background-color: var(--ls-primary-background-color); 
   --ls-guideline-color: var(--ls-border-color); 
   --color-level-1: var(--ls-secondary-background-color); 
   --color-level-2: var(--ls-primary-background-color); 
   --color-level-3: var(--ls-quaternary-background-color); 
   --color-level-4: var(--ls-tertiary-background-color); 
   --color-level-5: var(--ls-quinary-background-color); 
 } 
  
 html, 
 body { 
   font-weight: var(--ls-font-weight-light); 
   letter-spacing: var(--ls-font-letter-spacing); 
   line-height: var(--ls-font-line-height); 
   font-size: var(--ls-page-text-size); 
   background-color: #282a36; 
 } 
  
 i { 
   color: var(--yellow); 
 } 
  
 b { 
   color: var(--orange); 
   font-weight: var(--ls-font-weight-medium); 
 } 
  
 ol li::marker, 
 ul li::marker { 
   color: var(--cyan); 
 } 
  
 mark { 
   background-color: var(--yellow); 
 } 
  
 .bg-orange-400 { 
   background-color: var(--orange); 
 } 
  
 .bg-green-600 { 
   background-color: var(--green); 
 } 
  
 .bg-red-500 { 
   background-color: var(--red); 
 } 
  
 .form-checkbox { 
   border: 1px solid var(--ls-page-checkbox-border-color) !important; 
   border-radius: var(--ls-border-radius-low) !important; 
 } 
  
 .external-link { 
   color: var(--cyan); 
   text-decoration: none; 
   border-bottom: none; 
 } 
  
 .external-link:hover { 
   color: var(--cyan-hover); 
 } 
  
 h1.title, 
 .ls-block h1, 
 .ls-block h2, 
 .ls-block h3, 
 .ls-block h4, 
 .ls-block h5, 
 .ls-block h6 { 
   color: var(--purple); 
   font-weight: var(--ls-font-weight-regular); 
   font-family: var(--ls-font-family),-apple-system,system-ui,sans-serif; 
 } 
  
 /* Priority tag styling */ 
 .priority { 
   color: var(--ls-tag-text-color); 
   opacity: 1 !important; 
   font-size: 0px; /* Hide text */ 
 } 
  
 .priority:hover, 
 a.tooltip-priority:hover { 
   color: var(--ls-tag-text-hover-color); 
   opacity: 0.5; 
 } 
  
 a.priority[href="#/page/A"]:before { 
   content: "A"; 
   background: var(--red); 
 } 
  
 a.priority[href="#/page/B"]:before { 
   content: "B"; 
   background: var(--yellow); 
 } 
  
 a.priority[href="#/page/C"]:before { 
   content: "C"; 
   background: var(--green); 
 } 
  
 a.priority:before { 
   font-size: 0.9rem; 
   font-weight: var(--ls-font-weight-regular); 
   padding: 1px 4px 0px 3px; 
   margin: 0px 2px 0px 0px; 
   border-radius: var(--ls-border-radius-low); 
   color: var(--ls-primary-background-color); 
 } 
  
 a.tooltip-priority { 
   color: var(--ls-tag-text-color); 
 } 
  
 .Tooltip__label { 
   background: var(--ls-quinary-background-color); 
 } 
  
 .Tooltip__label::after { 
   border-bottom-color: var(--ls-quinary-background-color); 
 } 
  
 .page-reference .bracket { 
   color: var(--ls-border-color); 
   opacity: 0.8; 
 } 
  
 a.tag { 
   background: var(--pink); 
   border-radius: 3px 3px 3px 3px; 
   padding: 0px 3px; 
   color: var(--dark-background); 
   font-weight: var(--ls-font-weight-regular); 
 } 
  
 a.tag:hover { 
   background: transparent; 
   color: var(--pink-hover); 
 } 
  
 /* 
  
     Name:       Dracula for CodeMirror 
     Author:     Michael Kaminsky (http://github.com/mkaminsky11) 
     Adapted by:    Sly Bouhafs 
  
  
     Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 
     Adapted for logseq 
  
 */ 
  
 html[data-theme="dark"] .CodeMirror { 
   font-family: "FiraCode Nerd Font", "Fire Code", monospace; 
   line-height: 1.2; 
   background: var(--background); 
   box-shadow: none; 
   -webkit-box-shadow: none; 
   color: var(--white); 
 } 
  
 html[data-theme="dark"] .cm-s-default .CodeMirror, 
 html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { 
   background-color: transparent; 
   color: var(--white) !important; 
   border: none; 
 } 
  
 html[data-theme="dark"] .extensions__code-lang { 
   background: var(--light-background); 
 } 
  
 html[data-theme="dark"] #main-content-container code { 
   background: var(--darker-background); 
 } 
 html[data-theme="dark"] #main-content-container .selected code { 
   background: var(--background); 
 } 
 html[data-theme="dark"] #right-sidebar-container code { 
   background: var(--light-background); 
 } 
 html[data-theme="dark"] #right-sidebar-container .selected code { 
   background: var(--background); 
 } 
  
 html[data-theme="dark"] .CodeMirror { 
   border: 5px solid var(--light-background); 
 } 
  
 html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { 
   color: var(--background); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-cursor { 
   border-left: solid thin var(--white); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber { 
   color: var(--comment); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-activeline .CodeMirror-linenumber { 
   /* Color of line number where the cursor is present */ 
   color: var(--comment); 
   filter: brightness(1.4); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-gutter { 
   /* Background color for the line numbers displayed on the left */ 
   background: var(--background); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-hscrollbar { 
   margin: 4px; 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-selected { 
   background: rgba(255, 255, 255, 0.1); 
 } 
  
 html[data-theme="dark"] .CodeMirror .CodeMirror-line { 
   box-shadow: none; 
 } 
  
 html[data-theme="dark"] .CodeMirror .CodeMirror-line::selection, 
 html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::selection, 
 html[data-theme="dark"] 
   .cm-s-default 
   .CodeMirror-line 
   > span 
   > span::selection { 
   background: rgba(255, 255, 255, 0.1); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-line::-moz-selection, 
 html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::-moz-selection, 
 html[data-theme="dark"] 
   .cm-s-default 
   .CodeMirror-line 
   > span 
   > span::-moz-selection { 
   background: rgba(255, 255, 255, 0.1); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-comment { 
   color: var(--comment); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-string, 
 html[data-theme="dark"] .CodeMirror span.cm-string-2 { 
   color: var(--yellow); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-number { 
   color: var(--purple); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-variable { 
   color: var(--green); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-variable-2 { 
   color: var(--white); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-def { 
   color: var(--green); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-operator { 
   color: var(--pink); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-keyword { 
   color: var(--pink); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-atom { 
   color: var(--purple); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-meta { 
   color: var(--white); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-tag { 
   color: var(--pink); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-attribute { 
   color: var(--green); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-qualifier { 
   color: var(--green); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-property { 
   color: var(--cyan); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-builtin { 
   color: var(--green); 
 } 
 html[data-theme="dark"] .CodeMirror span.cm-variable-3, 
 html[data-theme="dark"] .CodeMirror span.cm-type { 
   color: var(--orange); 
 } 
  
 html[data-theme="dark"] .CodeMirror .CodeMirror-activeline-background { 
   background: rgba(255, 255, 255, 0.1); 
 } 
 html[data-theme="dark"] .CodeMirror .CodeMirror-matchingbracket { 
   text-decoration: underline; 
   color: var(--white) !important; 
 } 
  
 html[data-theme="dark"] #right-sidebar pre.CodeMirror-line { 
   background: transparent; 
 } 
  
 /* Fixes logseq calculator mode to line up with our spacing */ 
 .extensions__code-calc { 
   padding: 28px 0 0.25em; 
   background: var(--light-background); 
   line-height: 1.2; 
 } 
  
 .extensions__code-calc-output-line { 
   height: 16.8px !important; 
   padding-right: 5px; 
 } 
  
 /* Changes all icons to the same color */ 
 .ti { 
   color: var(--ls-icon-color); 
 } 
  
 /* Changes sidebar link colors to the same color as the icons */ 
 .left-sidebar-inner a.item > span { 
   color: var(--ls-icon-color); 
 } 
  
 /* Changes the look of the progress bar */ 
 progress { 
   vertical-align: middle; 
   border-radius: 8px; 
   height: 0.7em; 
   border: 1px solid var(--ls-border-color); 
   overflow: hidden; 
 } 
  
 progress::-webkit-progress-bar { 
   background: var(--ls-tertiary-background-color); 
 } 
  
 progress::-webkit-progress-value { 
   background: var(--green); 
 } 
  
 /* Dim done/canceled tasks instead of a strike */ 
 .canceled, .cancelled, .done { 
     opacity: 0.5; 
     text-decoration: none; 
 } 
  
 .editor-inner .uniline-block:is(.h1,.h2), .ls-block :is(h1,h2) { 
     border-bottom: none; 
 } 
  
 /* Make "New page" button opaque */ 
 html[data-theme="dark"] .new-page-link { 
   background: var(--background); 
   opacity: 1; 
 }

/* Blocks and Bullets customization */
.bullet-container .bullet {
   background-color: var(--ls-block-bullet,#394b59);
}

.block-children {
    border-left-color: var(--light-background,#ddd);
}