---
title: Dark Theme
description: Customized dark theme for personal use, implement via `{%hackmd @iiSnxwySloth/dark-theme %}` syntax.
tags: Themes
---

<style>
:root {
--textColor: #DCDDDE;
--backgroundColor: #36393f;
--darkBackgroundColor: #2F3136;
--blurpleColor: #5865F2;
--purpleColor: #9f3b9f;
--greenColor: #57F287;
--yellowColor: #FEE75C;
--redColor: #ED4245;
--pinkColor: #EB459E;
--blueColor: #00AFF4;
}

html, body {
color: var(--textColor) !important;
background-color: var(--backgroundColor) !important;
}

.ui-comment-app .open-comments,
.ui-comment-app .open-comments .ui-open-comments {
visibility: hidden;
}

.ui-toc-label,
.ui-toc-label:hover,
.ui-toc-label:focus {
color: var(--textColor);
background-color: var(--darkBackgroundColor);
}

.ui-toc-dropdown {
color: var(--textColor);
background-color: var(--darkBackgroundColor);
}

.ui-toc-dropdown a {
color: var(--textColor);
}

.ui-toc-dropdown a:hover,
.ui-toc-dropdown a:focus {
color: var(--blurpleColor);
}

.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: var(--textColor);
border-left: 2px solid var(--textColor);
}

.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a,
.ui-toc-dropdown .nav>.active>a {
color: var(--textColor);
border-left: 2px solid var(--textColor);
}

.markdown-body code,
.markdown-body pre,
.markdown-body tt,
.token.operator {
color: var(--textColor);
background-color: var(--darkBackgroundColor);
}

.markdown-body blockquote {
color: var(--textColor);
border-left: 3px solid var(--textColor);
}

.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: var(--textColor);
}

.markdown-body table th,
.markdown-body table td {
border: 1px solid var(--textColor);
background-color: var(--backgroundColor);
}

.markdown-body a {
color: var(--blueColor);
}

.markdown-body hr {
background-color: var(--textColor);
height: 2px;
}

.markdown-body h1 {
border-bottom: 2px solid var(--textColor);
}

.markdown-body h2 {
border-bottom: 1px solid var(--textColor);
}

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

.alert-info {
color: var(--darkBackgroundColor);
border-color: var(--blueColor);
background-color: var(--blueColor);
}

.alert-success {
color: var(--darkBackgroundColor);
border-color: var(--greenColor);
background-color: var(--greenColor);
}

.alert-warning {
color: var(--darkBackgroundColor);
border-color: var(--yellowColor);
background-color: var(--yellowColor);
}

.alert-danger {
color: var(--darkBackgroundColor);
border-color: var(--redColor);
background-color: var(--redColor);
}

</style>