---
# System prepended metadata

title: HackMD Theme - Dracula Fixed
tags: [HackMD-Theme]

---

---
title: "HackMD Theme - Dracula Fixed"
description: "Use `{%hackmd @lazco/dracula %}` syntax to include this theme."
tags: HackMD-Theme
breaks: false
---

<style>
    
.markdown-body li+li {
    padding-top: 0.75em;
}
    
.markdown-body li>p {
    margin-top: 5px;
}
    
.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre {
    margin-top: 0;
    margin-bottom: 5px;
}
    
.ui-owner-team {
  color: white;
}

.ui-owner-team:hover {
  color: white;
}

:root {
  --dracula-background: #282a36;
  --dracula-current-line: #44475a;
  --dracula-foreground: #f8f8f2;
  --dracula-comment: #6272a4;
  --dracula-cyan: #8be9fd;
  --dracula-green: #50fa7b;
  --dracula-orange: #ffb86c;
  --dracula-pink: #ff79c6;
  --dracula-purple: #bd93f9;
  --dracula-red: #f55;
  --dracula-yellow: #f1fa8c;
  --dracula-foreground-fade: hsla(60, 30%, 96%, .5);
  --dracula-background-dark: #202227;
  --background-primary: #282a36;
  --background-primary-alt: #44475a;
  --background-secondary: #282a36;
  --background-secondary-alt: #1a1e24;
  --text-normal: #f8f8f2;
  --text-title-h1: #bd93f9;
  --text-title-h2: #bd93f8;
  --text-title-h3: #bd93f7;
  --text-title-h4: #bd93f6;
  --text-title-h5: #bd93f5;
  --text-title-h6: #bd93f4;
  --text-link: #8be9fd;
  --markup-code: #ffb86c;
  --text-tag: #50fa7b;
  --text-a: #ff79c6;
  --text-a-hover: #ff79c0;
  --text-mark: #f1fa8c;
  --interactive-accent: #f1fa8c;
  --interactive-accent-rgb: #f1fa8c;
  --blockquote-border: #b294bb;
  --table-border-color: var(--dracula-foreground);
  --table-thead-color: var(--dracula-current-line);
  --table-bg-color: var(--dracula-background);
  --table-bg-darker-color: var(--dracula-background-dark)
}

.navbar {
  background: var(--dracula-background)
}

.navbar-default {
  border-color: var(--dracula-background);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15)
}

.navbar-default .navbar-brand {
  color: var(--text-color1)
}

.navbar-default .navbar-brand:hover {
  color: var(--dracula-purple)
}

.navbar-default .navbar-nav>li>a {
  color: var(--text-color1)
}

.navbar-default .navbar-nav>li>a:hover {
  color: var(--dracula-purple)
}

.ui-toc-dropdown .nav>li>a {
  color: #a9a28f
}

.ui-toc-dropdown .nav>li>a:hover {
  color: #f1fa8c
}

.community-button,
.ui-infobar,
.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a,
.ui-toc-dropdown .nav>.active>a {
  color: #fff
}

.community-button:hover {
  background: var(--dracula-purple);
  color: var(--dracula-background)
}

.ui-comment-app .open-comments {
  background: var(--background-primary)
}

.dropdown-menu {
  background: var(--background-primary-alt)
}

.ui-notification .notification-menu-item:hover {
  background: var(--background-secondary)
}

.ui-content,
body,
html {
  background: var(--background-primary);
  color: var(--text-normal);
  font-family: Open Sans, Clear Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
	outline: none;
}
	
.btn {
	outline: none !important;
}

.btn-default {
  background: var(--dracula-background);
  color: #bcc2cd;
	outline: none;
}

.btn-default,
.btn-default.active {
  border-color: var(--dracula-purple);
	outline: none;
}

.btn-default.active {
  background: var(--dracula-purple);
  color: var(--dracula-background);
	outline: none;
}

.btn-default.active:hover {
  background: #9174bf;
  border-color: var(--dracula-purple);
	outline: none;
}

.btn-default:hover {
  background: #463f5d;
  border-color: var(--dracula-purple);
  color: #fff;
	outline: none;
}

.btn-primary {
  background: var(--dracula-cyan);
  color: #0a1e0f
}

.btn-primary:hover {
  background: #6eb1c2;
  color: #0a1e0f
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  border-bottom: none;
  padding-bottom: 0
}

.markdown-body h1 {
  color: var(--text-title-h1);
  font-size: 28px;
  font-weight: 500;
  font-weight: 700
}

.markdown-body h2 {
  color: var(--text-title-h2);
  font-size: 26px;
  font-weight: 500;
  font-weight: 700
}

.markdown-body h3 {
  color: var(--text-title-h3);
  font-size: 23px;
  font-weight: 500;
  font-weight: 700
}

.markdown-body h4 {
  color: var(--text-title-h4);
  font-size: 20px;
  font-weight: 500;
  font-weight: 700
}

.markdown-body h5 {
  color: var(--text-title-h5);
  font-size: 18px;
  font-weight: 500;
  font-weight: 700
}

.markdown-body h6 {
  color: var(--text-title-h6);
  font-size: 16px;
  font-weight: 500;
  font-weight: 700
}

.markdown-body ol,
.markdown-body ul {
  padding-left: 30px
}

.markdown-body a,
.markdown-body a:hover {
  color: var(--text-link)
}

.markdown-body blockquote {
  border-color: var(--blockquote-border) !important;
  color: var(--interactive-accent) !important;
  font-style: italic
}

.markdown-body blockquote p {
  display: inline
}

.markdown-body table {
  display: table;
  text-align: left
}

.markdown-body table thead tr {
  background-color: var(--table-thead-color)
}

.markdown-bodytable tr th {
  border-left: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  font-weight: 700;
  margin: 0;
  padding: 6px 13px;
  text-align: left
}

.markdown-body table tbody tr {
  border-top: 1px solid var(--table-border-color);
  margin: 0;
  padding: 0
}

.markdown-body table tbody tr:nth-child(2n) {
  background-color: var(--table-bg-darker-color)
}

.markdown-body table tbody tr:nth-child(odd) {
  background-color: var(--table-bg-color)
}

.markdown-body table tr td {
  border-left: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  margin: 0;
  padding: 6px 13px;
  text-align: left
}

.markdown-body table tr td:first-child,
.markdown-body table tr th:first-child {
  border-left-width: 0
}

.markdown-body table tr td:last-child,
.markdown-body table tr th:last-child {
  border-right-width: 0
}

.markdown-body code {
  background-color: var(--background-primary-alt);
  border: 1px solid #525660;
  border-radius: 4px;
  bottom: -.1px;
  color: var(--markup-code) !important
}

.markdown-body kbd {
  background: var(--bg-color5);
  border-color: var(--menu-divider-color);
  color: var(--text-color1);
  font-family: Lucida Console
}

.markdown-body pre code {
  display: block;
  line-height: normal
}

.markdown-body pre,
.markdown-body pre code {
  background-color: var(--background-primary-alt);
  padding: 5px
}

.markdown-body pre {
  border-radius: 5px
}

.markdown-body strong {
  color: var(--markup-code);
  font-weight: 700
}

.markdown-body em {
  color: var(--interactive-accent)
}

.markdown-body img {
  background-color: transparent
}

.markdown-body mark {
  background-color: var(--text-mark);
  border-radius: 4px;
  color: var(--background-primary);
  margin: 0 2px;
  padding: 0 4px 1px
}

.markdown-body hr {
  background-color: var(--text-normal);
  border: 0;
  height: 1px
}

.markdown-body details {
  background-color: #383a59;
  border: 0 solid #37352f;
  border-radius: 1px;
  padding: 5px 10px
}

.markdown-body summary {
  color: #f8f8f2;
  cursor: pointer;
  font-weight: 700;
  padding: 4px
}

:root {
  --background: #282a36;
  --comment: #6272a4;
  --foreground: #f8f8f2;
  --selection: #44475a;
  --cyan: #8be9fd;
  --green: #50fa7b;
  --orange: #ffb86c;
  --pink: #ff79c6;
  --purple: #bd93f9;
  --red: #f55;
  --yellow: #f1fa8c;
  --background-30: #282a3633;
  --comment-30: #6272a433;
  --foreground-30: #f8f8f233;
  --selection-30: #44475a33;
  --cyan-30: #8be9fd33;
  --green-30: #50fa7b33;
  --orange-30: #ffb86c33;
  --pink-30: #ff79c633;
  --purple-30: #bd93f933;
  --red-30: #ff555533;
  --yellow-30: #f1fa8c33;
  --background-40: #282a3666;
  --comment-40: #6272a466;
  --foreground-40: #f8f8f266;
  --selection-40: #44475a66;
  --cyan-40: #8be9fd66;
  --green-40: #50fa7b66;
  --orange-40: #ffb86c66;
  --pink-40: #ff79c666;
  --purple-40: #bd93f966;
  --red-40: #ff555566;
  --yellow-40: #f1fa8c66
}

pre::-webkit-scrollbar {
  width: 2px
}

pre::-webkit-scrollbar-track {
  background-color: var(--comment);
  border-radius: 0
}

pre::-webkit-scrollbar-thumb {
  background-color: var(--purple);
  border-radius: 0
}

code[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
pre[class*=language-]::-moz-selection {
  background-color: var(--selection);
  text-shadow: none
}

code[class*=language-] ::selection,
code[class*=language-]::selection,
pre[class*=language-] ::selection,
pre[class*=language-]::selection {
  background-color: var(--selection);
  text-shadow: none
}

pre.line-numbers {
  counter-reset: linenumber;
  padding-left: 3.8em;
  position: relative
}

pre.line-numbers>code {
  position: relative;
  white-space: inherit
}

.line-numbers .line-numbers-rows {
  border-right: 1px solid #999;
  font-size: 100%;
  left: -3.8em;
  letter-spacing: -1px;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 3em
}

.line-numbers-rows>span {
  counter-increment: linenumber;
  display: block;
  pointer-events: none
}

.line-numbers-rows>span:before {
  color: #999;
  content: counter(linenumber);
  display: block;
  padding-right: .8em;
  text-align: right
}

div.code-toolbar {
  position: relative
}

div.code-toolbar>.toolbar {
  opacity: 0;
  position: absolute;
  right: .2em;
  top: .3em;
  transition: opacity .3s ease-in-out
}

div.code-toolbar:hover>.toolbar {
  opacity: 1
}

div.code-toolbar>.toolbar .toolbar-item {
  display: inline-block;
  padding-right: 20px
}

div.code-toolbar>.toolbar a {
  cursor: pointer
}

div.code-toolbar>.toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}

div.code-toolbar>.toolbar a,
div.code-toolbar>.toolbar button,
div.code-toolbar>.toolbar span {
  background: var(--comment);
  border-radius: .5em;
  color: var(--foreground);
  font-size: .8em;
  padding: .5em
}

div.code-toolbar>.toolbar a:focus,
div.code-toolbar>.toolbar a:hover,
div.code-toolbar>.toolbar button:focus,
div.code-toolbar>.toolbar button:hover,
div.code-toolbar>.toolbar span:focus,
div.code-toolbar>.toolbar span:hover {
  background-color: var(--green);
  color: inherit;
  text-decoration: none
}

@media print {

  code[class*=language-],
  pre[class*=language-] {
    text-shadow: none
  }
}

code[class*=language-],
pre[class*=language-] {
  word-wrap: normal;
  background: var(--background);
  color: var(--foreground);
  font-family: PT Mono, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  text-align: left;
  text-shadow: none;
  white-space: pre;
  word-break: normal;
  word-spacing: normal
}

pre[class*=language-] {
  border-radius: .5em;
  height: auto;
/*   margin: .5em 0; */
  overflow: auto;
  padding: 1em
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
  background: var(--background)
}

:not(pre)>code[class*=language-] {
  border-radius: .3em;
  padding: 4px 7px;
  white-space: normal
}

.limit-300 {
  height: 300px !important;
  height: 400px !important
}

.limit-500 {
  height: 500px !important
}

.limit-600 {
  height: 600px !important
}

.limit-700 {
  height: 700px !important
}

.limit-800 {
  height: 800px !important
}

.language-css {
  color: var(--purple)
}

.language-css .token,
.token {
  color: var(--pink)
}

.token.script {
  color: var(--foreground)
}

.token.bold {
  font-weight: 700
}

.token.italic {
  font-style: italic
}

.token.atrule,
.token.attr-name,
.token.attr-value {
  color: var(--green)
}

.language-css .token.atrule {
  color: var(--purple)
}

.language-html .token.attr-value,
.language-markup .token.attr-value {
  color: var(--yellow)
}

.token.boolean {
  color: var(--purple)
}

.token.builtin,
.token.class-name {
  color: var(--cyan)
}

.token.comment {
  color: var(--comment)
}

.token.constant {
  color: var(--purple)
}

.language-javascript .token.constant {
  color: var(--orange);
  font-style: italic
}

.token.entity {
  color: var(--pink)
}

.language-css .token.entity {
  color: var(--green)
}

.language-html .token.entity.named-entity {
  color: var(--purple)
}

.language-html .token.entity:not(.named-entity) {
  color: var(--pink)
}

.language-markup .token.entity.named-entity {
  color: var(--purple)
}

.language-markup .token.entity:not(.named-entity) {
  color: var(--pink)
}

.token.function {
  color: var(--green)
}

.language-css .token.function {
  color: var(--cyan)
}

.token.important,
.token.keyword {
  color: var(--pink)
}

.token.prolog {
  color: var(--foreground)
}

.token.property {
  color: var(--orange)
}

.language-css .token.property {
  color: var(--cyan)
}

.token.punctuation {
  color: var(--pink)
}

.language-css .token.punctuation {
  color: var(--orange)
}

.language-html .token.punctuation,
.language-markup .token.punctuation {
  color: var(--foreground)
}

.token.selector {
  color: var(--pink)
}

.language-css .token.selector {
  color: var(--green)
}

.token.regex {
  color: var(--red)
}

.language-css .token.rule:not(.atrule) {
  color: var(--foreground)
}

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

.token.tag {
  color: var(--pink)
}

.token.url {
  color: var(--cyan)
}

.language-css .token.url {
  color: var(--orange)
}

.token.variable {
  color: var(--comment)
}

.token.number {
  color: #bd93f9
}

.token.operator {
  color: #8be9fd;
	background: transparent
}

.token.char {
  color: #ff879d
}

.token.symbol {
  color: #ffb86c
}

.token.deleted,
.token.namespace {
  color: #e2777a
}

.highlight-line {
  border-radius: 4px;
  color: inherit;
  display: inline-block;
  padding: 2px 10px;
  text-decoration: none
}

.highlight-line:empty:before {
  content: " "
}

.highlight-line:not(:last-child) {
  min-width: 100%
}

.highlight-line .highlight-line:not(:last-child) {
  min-width: 0
}

.highlight-line-isdir {
  background-color: var(--selection-30);
  color: var(--foreground)
}

.highlight-line-active {
  background-color: var(--comment-30)
}

.highlight-line-add {
  background-color: var(--green-30)
}

.highlight-line-remove {
  background-color: var(--red-30)
}
</style>
