---
title: mytheme
tags: theme
description: Use `{%hackmd theme-mytheme%}` syntax to include this theme.
---
<style>

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

body > *:first-child {
margin-top: 0 !important;
}

body > *:last-child {
margin-bottom: 0 !important;
}

a {
color: #4183C4;
text-decoration: none;
}

a.absent {
color: #cc0000;
}

a.anchor {
display: block;
padding-left: 5px;
margin-left: 0px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}

/*--------------- navbar ---------------*/
.header {
background-color: #0e0e0e;
border-color: #0e0e0e;
}

.navbar {
background-color: #0e0e0e;
border-color: #0e0e0e;
}

.navbar a {
color: #eee !important;
}

.navbar .btn-group label {
background-color: #0e0e0e;
color: #eee;
border-color: #555;
}

.navbar .btn-group label.btn-default:focus,
.navbar .btn-group label.btn-default:hover {
background-color: #2a2a2a;
color: #eee;
border-color: #555;
}

.navbar .btn-group label.active {
background-color: #555;
color: #eee;
border-color: #555;
}

.navbar .btn-group label.active:focus,
.navbar .btn-group label.active:hover {
background-color: #555;
color: #eee;
border-color: #555;
}

.navbar-default .btn-link:focus,
.navbar-default .btn-link:hover {
color: #eee;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: #555;
}

.dropdown-header {
color: #eee;
}

.dropdown-menu {
background-color: #222;
border: 1px solid #555;
border-top: none;
}

.dropdown-menu>li>a {
color: #eee;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background-color: #555555;
color: #eee;
}

.dropdown-menu .divider {
background-color: #555;
}

.header .open .dropdown-menu {
background-color: #202020;
}

.ui-share-menu .ui-share-copy,
.ui-share-menu .ui-share-preview {
border-color: #6d6d6d !important;
background-color: #333 !important;
color: #FFF !important;
}

.ui-share-menu .ui-share-copy:hover,
.ui-share-menu .ui-share-copy:focus,
.ui-share-menu .ui-share-preview:hover,
.ui-share-menu .ui-share-preview:focus {
background-color: #737373 !important;
color: #FFF !important;
}

.permission-dropdown .ui-more-settings,
.permission-dropdown .sidenav-trigger {
color: #7bf;
}

.public-published-toggle .unpublish:hover {
background-color: #286090;
}

.menuitem-dropdown .menuitem-dropdown-trigger {
border-color: #8e8e8e;
}

.menuitem-dropdown .menuitem-dropdown-trigger:hover,
.menuitem-dropdown .menuitem-dropdown-trigger:focus {
background-color: #3e4045;
}

.navbar .announcement-popover {
background: #4F4F4F;
}

.navbar .announcement-popover .announcement-popover-header {
background: #2e2e2e;
border-bottom: 1px solid #2e2e2e;
}

.navbar .announcement-popover .announcement-popover-body {
background: #4F4F4F;
color: #eee;
}

.navbar .announcement-popover .announcement-popover-footer {
background: #4F4F4F;
}

.navbar .announcement-area .caption.inverse {
color: #eee;
}

.label-warning {
background-color: #ffc107;
color: #212529;
}

/*--------------- history / recent ---------------*/
.list.row-layout li .item {
border-color: #696c7d;
}

.list.row-layout li:nth-last-of-type(1) .item {
border-bottom: none;
}

.list li .item {
background: #1c1c1c;
color: #fff;
}

.list li:hover .item,
.list li:focus .item {
background: #404040;
}

.list li .item h4 {
color: #fff;
}

.list li p {
color: #ccc;
}

.list li p i {
font-style: normal;
}

.list li .item .content .tags span {
background: #555;
}

.list li .item.wide .content .title a,
.list li .item.wide .content .title a:focus,
.list li .item.wide .content .title a:hover {
color: #ddd;
}

.ui-item {
color: #fff;
opacity: 0.7;
}

.ui-item:hover,
.ui-item:focus {
opacity: 1;
color: #fff;
}

.list li .item.wide hr {
border-color: #6d6d6d;
}

.overview-widget-group .btn,
.multi-select-dropdown-menu .ui-dropdown-label,
.multi-select-dropdown-menu .dropdown-options,
.form-control {
border-color: #8e8e8e;
}

.multi-select-dropdown-menu .dropdown-options .ui-option:hover {
background-color: #4d4d4d;
color: #eee;
}

#overview-control-form #overview-keyword-input-container .select2-container {
background-color: #3e4045 !important;
}

#overview-control-form #overview-keyword-input-container .select2-container .select2-choices {
background-color: #3e4045;
}

.search {
background-color: #3e4045;
color: #eee;
}

.btn.btn-gray {
background: #1b1b1b;
}

.btn.btn-gray:hover {
background: #4d4d4d;
color: #eee;
}

.search::placeholder,
.search::-webkit-input-placeholder,
.search:-moz-placeholder,
.search::-moz-placeholder,
.search:-ms-input-placeholder {
color: #eee;
}

.btn.btn-gray {
border-color: #6d6d6d;
background: #333;
color: #eee;
}

.select2-default {
color: #eee !important;
}

.select2-results .select2-highlighted {
background: #4d4a4d;
color: #eee;
}

.select2-container-multi .select2-choices {
background: #3e4045;
}

.select2-container-multi .select2-choices .select2-search-choice {
background: #131313;
color: #eee;
border-color: #555;
box-shadow: none;
}

.btn-default,
.btn-default:focus {
color: white;
background-color: #20242B;
border-color: #424958;
border-width: 1px;
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover {
background: #282C34;
}

.btn-default:hover {
color: #fff;
background-color: #858585;
border-color: #424958;
}

.overview-widget-group .btn.active {
background-color: #6a6a6a;
color: #eee;
}

.overview-widget-group .btn:hover {
background-color: #7d7d7d;
color: #eee;
border-color: #636363;
}

.overview-widget-group .slider.round {
border-color: #ccc;
}

.overview-widget-group .slider.round:before {
border-color: #ccc;
}

.overview-widget-group input:checked+.slider {
background-color: #ccc;
}

.ui-category-description-icon a {
color: #eee;
}

.item .ui-history-pin.active {
color: #f00;
}

.ui-history-close {
color: #eee;
opacity: 0.5;
}

.pagination>li>a,
.pagination>li>span {
color: #eee;
background-color: #2e2e2e;
border-color: #6a6a6a;
}

.pagination>li>a:hover {
color: #fff;
background-color: #7d7d7d;
border-color: #6a6a6a;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
color: #eee;
background-color: #2e2e2e;
border-color: #6a6a6a;
}

.pagination.dark>li>a,
.pagination.dark>li>span {
color: #aaa;
}

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative;
}

h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
padding-top: 0;
}

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
text-decoration: none;
}

.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;
}

h1 tt, h1 code {
font-size: inherit;
}

h2 tt, h2 code {
font-size: inherit;
}

h3 tt, h3 code {
font-size: inherit;
}

h4 tt, h4 code {
font-size: inherit;
}

h5 tt, h5 code {
font-size: inherit;
}

h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #BF616A;
}

.markdown-body h1{
border-bottom-color: inherit;
}
.markdown-body h2 {
border-bottom-color: inherit;
}

/* scroll bar */
.ui-edit-area .ui-resizable-handle.ui-resizable-e {
background-color: #303030;
border: 1px solid #303030;
box-shadow: none;
}

/* info bar */
.ui-infobar {
color: #999;
}

/* permission */
.permission-popover-btn-group .btn.focus,
.permission-popover-btn-group .btn:active,
.permission-popover-btn-group .btn:focus,
.permission-popover-btn-group .btn.active {
background-color: #6a6a6a !important;
color: #eee !important;
border-color: #555 !important;
}

.permission-popover-btn-group .btn:hover,
.permission-popover-btn-group .btn.active:hover {
background-color: #7d7d7d !important;
color: #eee !important;
border-color: #636363 !important;
}

.ui-delete-note:hover,
.ui-delete-note:focus,
.ui-delete-note:active {
background-color: #dc3545 !important;
}

.ui-invitee-invite {
border-color: #8e8e8e !important;
}

.ui-invitee-invite:hover,
.ui-invitee-invite:focus {
background-color: #737373;
color: #eee !important;
}

.ui-no-invitee-label {
color: #ccc !important;
}

.select2-container {
background: #202020;
}

.select2-container-multi .select2-choices .select2-search-field input {
color: #eee;
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
color: #000;
}

.select2-drop {
background: #202020;
color: #eee;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
background: #202020;
}

h2 {
font-size: 24px;
color: #CC856E;
}

h3 {
font-size: 18px;
color: #EBCB8B
}

h4 {
font-size: 16px;
color: #A3BE8C
}

h5 {
font-size: 14px;
color: #46BDDF
}

h6 {
color: #777777;
font-size: 14px;
}

.markdown-body table tr {
border: 2.5px solid;
border-color: #3D4351;
margin: 0;
padding: 0;
background-color: #282C34;
}

.markdown-body blockquote {
color: #CC856E;
font-size: 20;
}

.markdown-body blockquote {
font-size: 20;
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777;
}

.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: #20242B;
color: white;
}

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

.markdown-body tt {
color: #B48EAD;
background-color: #B48EAD;
}

a,
.open-files-container li.selected a {
color: #46BDDF;
}

/* .markdown-body code, tt { */
/* margin: 0 2px; */
/* padding: 0 5px; */
/* white-space: nowrap; */
/* border: 1px solid #eaeaea; */
/* background-color: #f8f8f8; */
/* border-radius: 3px; */
/* } */

.markdown-body blockquote {
color: inherit;
background-color: #20242B;
padding: 7px 20px 7px;
border: solid .5px;
border-left: solid 8px;
border-color: #424958;
border-radius: 5px;
font-size: inherit;
}

.markdown-body code{
color: #B48EAD;
background-color: #20242B;
}

.markdown-body pre {
color: inherit;
background-color: #20242B;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 7px 20px 7px;
border-radius: 6px;
}

/*--------------- book mode ---------------*/
.topbar {
background: #1e1e1e;
}

.btn.focus,
.btn:focus,
.btn:hover {
color: #fff;
background-color: #333;
}

.summary {
background: #1e1e1e;
}

.summary,
.toolbar {
background: #1e1e1e !important;
border-color: #4d4d4d !important;
}

.toolbar i {
color: #fff;
}

.summary h1,
.summary h2,
.summary h3 .summary hr {
color: #ddd;
border-color: #777 !important;
}

.summary .nav>li>a {
color: #7bf;
}

.summary .nav-pills>li.active>a,
.summary .nav-pills>li.active>a:focus,
.summary .nav-pills>li.active>a:hover {
color: #ff9100;
}

.ui-summary-search {
font-size: 16px;
border: 1px solid #6D6D6D;
background-color: #333;
color: #FFF;
}

.summary h1,
.summary h2,
.summary h3,
.summary h4,
.summary h5,
.summary h6 {
border-color: #454545;
}

/* .markdown-body pre code, pre tt {
background-color: transparent;
border: none;
} */

/* .navbar{
background-color: #20242B;
}

.btn{
background-color: #20242B;
}

.create-note-menu{
background-color: #20242B;
}
*/
/* .ui-resizable-handle{
border: 1px #77777;
background-color: #46bddf;
} */
</style>