---
# System prepended metadata

title: Dark mode template
tags: [' dark mode style template', HackMD style]

---

---
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>