---
# System prepended metadata

title: HackMD Theme - Dracula (modified)
tags: [HackMD-Theme]

---

---
title: "HackMD Theme - Dracula (modified)"
description: "Use `{%hackmd @ok101304031/pink %}` syntax to include this theme."
tags: HackMD-Theme
breaks: false
---

<style>

:root{--dracula-background:#282a36;--dracula-current-line:#44475a;--dracula-foreground:#f8f8f2;--dracula-comment:#6272a4;--dracula-cyan:#8be9fd;--dracula-green:#50fa7b;--dracula-orange:#ffb86c;--dracula-purple:#bd93f9;--dracula-red:#f55;--dracula-yellow:#f1fa8c;--dracula-pink:#ec93ab;---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:#d6859d;--text-title-h2:#d6859d;--text-title-h3:#b97386;--text-title-h4:#b97386;--text-title-h5:#b97386;--text-title-h6:#b97386;--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-pink)}.navbar-default .navbar-nav>li>a{color:var(--text-color1)}.navbar-default .navbar-nav>li>a:hover{color:var(--dracula-pink)}.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-pink);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}.btn-default{background:var(--dracula-background);color:#bcc2cd}.btn-default,.btn-default.active{border-color:var(--dracula-pink)}.btn-default.active{background:var(--dracula-pink);color:var(--dracula-background)}.btn-default.active:hover{background:#9174bf;border-color:var(--dracula-pink)}.btn-default:hover{background:#463f5d;border-color:var(--dracula-pink);color:#fff}.btn-primary{background:var(--dracula-pink);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:#ffffff !important;font-style:normal}.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:14px}pre::-webkit-scrollbar-track{background-color:var(--comment);border-radius:0}pre::-webkit-scrollbar-thumb{background-color:var(--pink);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(--pink)}.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(--pink)}.language-html .token.attr-value,.language-markup .token.attr-value{color:var(--yellow)}.token.boolean{color:var(--pink)}.token.builtin,.token.class-name{color:var(--cyan)}.token.comment{color:var(--comment)}.token.constant{color:var(--pink)}.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(--pink)}.language-html .token.entity:not(.named-entity){color:var(--pink)}.language-markup .token.entity.named-entity{color:var(--pink)}.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}.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)}.dropdown-menu>li>a{color:#ff9ebb !important;}.ui-share-copy{color:#282a36 !important;}.ui-share-preview{color:#282a36 !important;}.example-present{color:#282a36 !important;}.ui-edit-area .ui-resizable-handle.ui-resizable-e{background-color: #b26e82 !important;box-shadow: 3px 0 8px #ff9ebb;}.label-success{background-color:#d6859d}.btn-default.active:hover{background:#ffcfd6}
</style>
