---
tags: HackMD style, dark mode style template
---
<!-- HackMD dark mode style template -->
<!-- {%hackmd C-_zW0vxSXSSsOkJHknc8g %} -->
<style>
:root {
/* main */
--color-background: #2a2a2a;
--color-font: #eeeeee;

/* header */
--color-header-background: #363636;
--color-header-font: #fa0;
--color-header-btn: #313131;
--color-header-btn-hover: #555555;

/* toc */
--color-toc-border: var(--color-font);
--color-toc-background: #363636;
--color-toc-font: var(--color-font);

/* other */
--color-transparent: #00000000;
--transition-delay: .25s;

/* a */
--color-a: #42b883;
--color-a-hover: #fa0;

/* top tags */
--color-tags: #cccccc;
--color-tag-item-background: #ffaa0022;
--color-tag-item-font: #ffaa00;
}

.markdown-body .title-tags-preview {
display: none;
}

html, body {
width: 100%;
height: 100%;
background: var(--color-background) !important;
color: var(--color-font) !important;
}

.markdown-body h1 {
color: var(--color-font);
}

div.summary {
background: var(--color-background) !important;
color: var(--color-font) !important;
}

/* header */
div.collapse.navbar-collapse,
div.collapse.navbar-collapse * :not(.label-warning, .ml-1),
div.hmd-navbar.navbar-collapse {
background: var(--color-header-background) !important;
}
div.collapse.navbar-collapse label {
background: var(--color-header-btn) !important;
transition: all var(--transition-delay);
}
div.collapse.navbar-collapse label:hover {
background: var(--color-header-btn-hover) !important;
}
div.collapse.navbar-collapse label.active {
box-shadow: 2px 2px 3px 0px #000000 inset,
-1px -1px 3px 0px #ffffff99 inset;
}
div.collapse.navbar-collapse a.ui-new.ui-new-note-menu:hover,
div.collapse.navbar-collapse a.ui-help:hover,
div.collapse.navbar-collapse a.ui-spotlight:hover,
div.collapse.navbar-collapse button.ui-status:hover,
div.collapse.navbar-collapse a.ui-profile-label:hover,
div.collapse.navbar-collapse a.ui-menu:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-right .ui-host-list.open .btn.ui-status.online {
background: var(--color-header-btn-hover) !important;
}
div.modal-content * {
background: var(--color-header-background) !important;
}
div.modal-content * :not(a) {
color: var(--color-font) !important;
}
div.navbar-title > div {
color: var(--color-font) !important;
}
div[data-radix-popper-content-wrapper] * {
color: var(--color-background) !important;
}
/* mobile */
.sidenav .dropdown-header.fill-username-banner {
background: var(--color-header-btn-hover) !important;
}
div.ui-no-invitee-label,
div.ui-invitee-limit-label,
.btn-default,
.public-publish-container div div,
.form-control,
.text-gray-600,
.ui-share-domain,
.sidenav .dropdown-header,
.permission-dropdown .ui-share-preview {
color: var(--color-font) !important;
}
div.navbar-header,
.ui-more-settings-menu-back,
.btn-default,
.select2-container-multi .select2-choices,
.sidenav-profile,
.sidenav-note-more,
.permission-dropdown .ui-share-preview,
.input-group .input-group-btn .ui-share-copy,
.form-control,
.sidenav-permission,
.sidenav-menu,
.main-sidenav,
.sidenav-create {
background: var(--color-header-background) !important;
}
.sidenav .divider-header {
background: var(--color-header-btn-hover) !important;
}
.ui-short-status:hover,
.side-menu-button:hover,
.side-menu-button.focus,
div.menuitem-dropdown-trigger:hover {
background: var(--color-header-btn-hover) !important;
}

/* left side toc */
#ui-toc-affix {
padding: 1.5rem;
border-radius: 5px;
background: var(--color-toc-background) !important;
}
#ui-toc-affix .nav > .active > a {
border-left: 2px solid var(--color-toc-border) !important;
}
#ui-toc-affix a {
color: var(--color-toc-font) !important;
transition: all var(--transition-delay);
}
#ui-toc-affix a:hover {
border-left: 1px solid var(--color-toc-border) !important;
}

/* dropdown */
div.dropdown #tocLabel {
border: 1px solid var(--color-toc-border) !important;
background: var(--color-toc-background) !important;
color: var(--color-toc-font) !important;
}
.dropdown-menu,
ul.ui-toc-dropdown.dropdown-menu {
background: var(--color-toc-background) !important;
}
ul.ui-toc-dropdown.dropdown-menu .nav > .active > a {
border-left: 2px solid var(--color-toc-border) !important;
}
ul.ui-toc-dropdown.dropdown-menu a {
color: var(--color-toc-font) !important;
transition: all var(--transition-delay);
}
ul.ui-toc-dropdown.dropdown-menu a:hover {
border-left: 1px solid var(--color-toc-border) !important;
}
.ui-notification .notification-menu-item:hover {
background: var(--color-header-btn-hover) !important;
}

/* icon */
i.fa {
background: var(--color-transparent) !important;
color: var(--color-font) !important;
}
.ui-like:hover,
.ui-bookmark:hover,
.community-button:hover {
background: var(--color-header-btn-hover) !important;
}

/* comment */
.open-comments {
background: var(--color-background) !important;
}
.open-comments .ui-open-comments {
background: var(--color-background) !important;
}

/* top tags style */
.markdown-body h6 span {
color: var(--color-tags) !important;
}
.markdown-body h6 code {
background: var(--color-tag-item-background) !important;
color: var(--color-tag-item-font) !important;
}

/* span */
body .navbar span,
div.ui-view-area .ui-infobar span {
color: var(--color-font) !important;
}

/* li */
body .navbar li {
color: var(--color-font) !important;
}

/* table */
.markdown-body table tr {
background: var(--color-transparent) !important;
}

/* a */
body .help-modal a,
body .spotlight-modal a,
div.ui-view-area a {
color: var(--color-a) !important;
transition: all var(--transition-delay);
i {
color: var(--color-a) !important;
}
}
body .help-modal a:hover,
body .navbar a:hover,
body .spotlight-modal a:hover,
div.ui-view-area a:hover {
color: var(--color-a-hover) !important;
i {
color: var(--color-a-hover) !important;
}
}
button.ui-status:hover {
color: var(--color-a-hover) !important;
i.fa {
color: var(--color-a-hover) !important;
}
}
body .navbar button.ui-status:hover span {
color: var(--color-a-hover) !important;
}

/* svg */
svg {
border-radius: 5px;
background: #ffffff !important;
}
</style>