Notable Custom CSS: Fixes for the Dracula custom theme in v1.9-beta.2 to v1.9-beta.7

custom.css

body, html {
  --bg-primary: #292a36;
  --bg-primary-border: #404154;

  --bg-secondary: #21222c;
  --bg-secondary-border: #424457 /* --bg-secondary + 15% Lightness */;
  --bg-secondary-hover: #2c2d3a /* --bg-secondary + 5% Lightness */;
  --bg-secondary-active: #373849 /* --bg-secondary + 10% Lightness */;

  --bg-tertiary: #1e1f29;
  --bg-tertiary-hover: #2e2f38;
  --bg-tertiary-active: #3a3b44;
}

/* TOOLBAR */
.mainbar .toolbar:not(.viewlet-toolbar) {
  /* Background */
  background-color: var(--bg-secondary) !important;
}
.button.primary {
  /* Button */
  background-color: var(--bg-tertiary) !important;
}
.button.primary.active, .button.primary:active {
  /* Active button */
  background-color: var(--bg-tertiary-active) !important
}
.button.primary:not(.active):not(:active):hover {
  /* Hovered button */
  background-color: var(--bg-tertiary-hover) !important;
}

/* TABBAR */
.tabbar .tab.active, .tabbar .tabbar-button.active, .tabbar .tab:active, .tabbar .tabbar-button:active {
  /* Active tab */
  background-color: var(--bg-primary) !important;
}
.tabbar .tab.active, .tabbar .tabbar-button.active {
  border-bottom: none;
}
.tabbar .tab:not(:hover):not(:active):not(.hover):not(.active), .tabbar .tabbar-button:not(:hover):not(:active):not(.hover):not(.active) {
  /* Normal tab */
  background-color: var(--bg-tertiary) !important;
}
.tabbar .tab:not(.active):not(:active):hover, .tabbar .tabbar-button:not(.active):not(:active):hover {
  /* Hovered tab */
  background-color: var(--bg-tertiary-hover) !important;
}

/* PALETTE/QUICK PICK */
.modal {
  background-color: var(--bg-primary) !important;
  color: white !important;
  border-color: var(--bg-primary-border) !important;
}

/* VIEWBAR */
.viewbar .button {
  /* Buttons */
  background-color: var(--bg-secondary) !important;
}
.viewbar .button, .viewbar .spacer, .viewbar .toolbar-spacer-y, .viewbar {
  /* Background */
  background-color: var(--bg-secondary) !important;
}
.viewbar .button.active, .viewbar .button:active {
  /* Active button */
  background-color: var(--bg-tertiary-active) !important;
}
.viewbar .button:not(.active):not(:active):hover {
  /* Hovered button */
  background-color: var(--bg-tertiary-hover) !important;
}

/* TOASTS */
.toast {
  background-color: var(--bg-secondary) !important;
  border-color: var(--bg-secondary-border) !important;
}
.toast:not(.active):not(:active):hover {
  background-color: var(--bg-secondary-hover) !important
}
.toast.active, .toast:active {
background-color: var(--bg-secondary-active) !important;
}

/* SEARCHBAR */
.editor .searchbar, .preview-wrapper .searchbar {
  background-color: var(--bg-secondary) !important;
  border-color: var(--bg-secondary-border) !important;
}

/* CODE BLOCKS */
.preview pre {
  background-color: var(--bg-secondary) !important;
}

/* GENERIC SECONDARY UI ELEMENTS */
input.primary,
textarea.primary,
.label.primary,
.container.primary,
.card.primary, 
.tagbox.primary, .autocomplete, .popover, .tagbox-wrapper .button,
.panel {
  background-color: var(--bg-secondary) !important;
  border-color: var(--bg-secondary-border) !important; 
}

settings.json

{
  "themes.colors": {
    "[Dracula]": {
      "layout:border": "#44475B",
      "preview:heading:border": "#44475b",
      "preview:h6:foreground": "#44475b",
      "preview:blockquote:foreground": "#44475b",
      "preview:blockquote:border": "#44475b",
      "preview:table:border": "#44475b",
      "preview:hr:background": "#44475b",
      "color:accent:background": "#bd93f9",
      "graph:background": "#292a36",
      "graph:tooltip:background": "#21222c"
    }
  }
}