---
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>