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

<style>

html, body, .ui-content {
background-color: #282C34;
color: #ddd;
}

/* For dark book sidebar */

div.summary .toolbar {
background-color: #282C34;
}

div.summary {
background-color: #282C34;
}

div.summary .nav>li>a {
color: #ABB2BF;
}

div.summary input {
color: #ABB2BF !important;
background-color: #282C34;
}

/* For dark and one-dark styled code blocks */

code {
background-color: #1e2328 !important;
}

pre.part {
background-color: #1e2328 !important;
}

pre.part code {
color: #ABB2BF !important;
}

pre code {
background-color: #1e2328 !important;
color: #ABB2BF !important;
}

div.code {
color: #ABB2BF !important;
}

span.keyword {
color: #c678DD !important;
}

span.token {
color: #c678DD !important;
}

span.operator {
color: #ABB2BF !important;
background-color: #1e2328 !important;
}

span.constant {
color: #E06C75 !important;
}

span.function {
color: #61AFEF !important;
}

span.punctuation {
color: #E5C07B !important;
}

/* Darkmode styling for the rest and misc. elements */

.ui-view-area > .ui-infobar {
display: block;
}

.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: white;
border-left: 2px solid white;
}

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

.ui-toc-dropdown {
background-color: #282C34;
}

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

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

.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, 0.36);
}

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