---
tags: theme
title: HackMD Dark Theme
description: Use `{%hackmd @SakiiR/dark-theme %}` syntax to include this theme.
---

<style>
.ui-content,
body,
html {
background-color: #333;
color: #ddd
}

pre {
max-height: 40em;
background-color: #535353;
color: #FFF;
}

.markdown-body .highlight pre,
.markdown-body pre {
background-color: #535353;
color: #FFF;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: #ddd
}

.markdown-body h1,
.markdown-body h2 {
border-bottom-color: #ffffff69
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #fff
}

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

.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a,
.ui-toc-dropdown .nav>.active>a {
color: #fff;
border-left: 2px solid #fff
}

.back-to-top:focus,
.back-to-top:hover,
.expand-toggle:focus,
.expand-toggle:hover,
.go-to-bottom:focus,
.go-to-bottom:hover {
color: #fff
}

.ui-toc-dropdown {
background-color: #333
}

.ui-toc-label.btn {
background-color: #191919;
color: #fff
}

.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: #fff;
border-left: 1px solid #fff
}

.markdown-body blockquote {
color: #bcbcbc
}

.markdown-body table tr {
background-color: #5f5f5f
}

.markdown-body table tr:nth-child(2n) {
background-color: #4f4f4f
}

.markdown-body code,
.markdown-body tt {
color: #eee;
background-color: rgba(230, 230, 230, .36)
}

.open-files-container li.selected a,
a {
color: #5eb7e0
}
</style>