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

<style>

:root {
--bg: #22272e;
--txt: #adbac7;
--darker: #444c56;
--secondary: #2d333b;
--btn: #373e47;
--tw-text-opacity: 0;
}

html, body, .ui-content {
background-color: var(--bg);
color: var(--txt);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: var(--txt);
}

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

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

.ui-comment-app .open-comments {
background-color: var(--btn);
color: var(--txt);
}
.btn-default,
.ui-comment-app .open-comments .btn.ui-open-comments {
background-color: var(--btn);
color: var(--txt);
border: 1px solid #768390;
}
.

/* table start */

table {
border-color: grey;
}

.markdown-body table th, .markdown-body table td {
border-color: var(--darker);
}

.markdown-body table tr {
background-color: var(--bg);
}

.markdown-body table tr:nth-child(2n) {
background-color: var(--secondary);
}

/* table end */
/* navbar start */

.navbar {
background-color: var(--secondary);
border: none;
color: var(--txt);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a,
.navbar-right .btn.ui-status.online
{
color: var(--txt);
}

/* share btn */
.navbar-nav>li>.dropdown-menu {
border-radius: 6px;
border: 0.5px solid var(--txt);
color: var(--txt);
background-color: var(--secondary);
}
.input-group .input-group-btn .ui-share-copy,
.permission-dropdown .ui-share-preview {
color: var(--txt);
background-color: var(--secondary);
}

/* navbar end */

/* splitter start */

.ui-edit-area .ui-resizable-handle.ui-resizable-e {
background-color: var(--txt);
box-shadow: none;
width: 3px;
right: 0;
}

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

/* splitter end */

.document-footer span,
.document-footer i,
.document-footer p {
color: var(--txt);
}

/* code start */

.markdown-body pre,
.markdown-body code,
.markdown-body tt {
color: var(--txt)!important;
background-color: var(--secondary);
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
background: transparent;
}

/* code end */

/*
reference:
- https://hackmd.io/s/SyliLtFF4
- https://hackmd.io/dxywSXJPTUKkdVq4tJdIaQ?edit
- https://hackmd.io/EyHCJVyqSiWm6v9GjqDOZA?edit
*/
</style>