---
# System prepended metadata

title: Importable Dark Theme
tags: [' dark', Theme]

---


<!--Importable Dark Theme------
 
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
{%hackmd @cimeesia/H18RVTzeK %}
------------------------------>

<!----------------------------------------------------------

This is an importable dark theme made by me, Sia, a big fan 
of HackMD. Feel free to import this Note by adding an above 
line of code into your Note. Of course, without asking! 
Just be aware you'll have to follow Creative Commons BY-SA. 

[Sia's Dark Theme](https://hackmd.io/d2bXxJR_QdOpTc6A_Vbz9g)

By the way, thanks for @hackmd who made a very good guidance
 that taught me how to import a Note from another Note.
[HackMD's Guide](https://hackmd.io/s/how-to-embed-note-tw).

---------------------------------------------------------->

<style>
    /* fonts only for editor, just for myself. */
    .CodeMirror>*{
        font-size: 18px !important;
        font-family: 'Cascadia Code', monospace !important;
        font-weight: 300;
    }
    
    /* Universal Setup */    
    [data-inline-comment-id=user-selection-highlight]{
        background: unset !important;
    }
    [data-inline-comment-id=user-selection-highlight].highlighted{
        border: unset !important;
    }
    *::selection{
        background: rgba(88, 237, 217, 0.3) !important;
    }
    /* Left Panel for Book Mode */
    body div.summary{
        background: #333 !important;
        background-color: #333 !important;
    }
    
    /* nav article title */
    body div#meta-title-tags{
        display: none !important;
    }
    
    /* .ui-view-area only work in edit mode. */
    :root, html, body, .ui-view-area, body>div#publish-page{
        background: #333;
        color: #EBD4C4;
    }
    
    /* hide the top nav that shows title */
    #meta-title-tags{
         display: none !important;
    }
    /* hide Edit button and whole Comment system. */
    .ui-edit.btn,
    .ui-comment-app{
        display: none !important;
    }
    /* remove right-above button's background. */
    .community-button:hover,
    .community-button:focus{ background: unset !important; }

    /* Link */
    a:any-link{ color: #93DFDA; text-decoration: none; }
    a:hover{    color: #E6D769; text-decoration: underline hotpink solid 1px; }

    /* Header */
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4,
    .markdown-body h5,
    .markdown-body h6{ border: unset !important; }

    .markdown-body h1{ font-size: 36px; color: hsla(344, 73%, 88%, 0.9) !important; letter-spacing: 3px; }
    .markdown-body h2{ font-size: 30px; color: hsla(344, 73%, 80%, 0.9) !important; letter-spacing: 2px; }
    .markdown-body h3{ font-size: 25px; color: hsla(344, 73%, 72%, 0.9) !important; letter-spacing: 1px; }
    .markdown-body h4{ font-size: 21px; color: hsla(344, 73%, 64%, 0.9) !important; }
    .markdown-body h5{ font-size: 18px; color: hsla(344, 73%, 56%, 0.9) !important; }
    .markdown-body h6{ font-size: 16px; color: hsla(344, 73%, 48%, 0.9) !important; }

    /* Anchor. octicon-link */
    .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{ border: unset !important; }
    
    /* <img>'s background */
    .markdown-body img{ background: transparent; }

    /* left-side nav */
    .ui-toc.dropup{
        display: none !important;
    }
    .ui-toc-dropdown{
        overflow-y: overlay !important;
    }
    .ui-toc-dropdown .nav>li>a:focus,
    .ui-toc-dropdown .nav>li>a:hover{ border: unset !important; color: #D79AFC; }
    
    .ui-toc-dropdown .nav>.active>a,
    .ui-toc-dropdown .nav>.active:focus>a,
    .ui-toc-dropdown .nav>.active:hover>a{ border-left: white solid 2px !important; color: #D79AFC; }

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

    /* Alert Section */
    .alert-success{ color: #ddd !important; background: rgba(170, 230, 143, 0.4) !important; border: unset !important;}
    .alert-info{    color: #ddd !important; background: rgba(103, 183, 223, 0.4) !important; border: unset !important;}
    .alert-warning{ color: #ddd !important; background: rgba(227, 212, 141, 0.4) !important; border: unset !important;}
    .alert-danger{  color: #ddd !important; background: rgba(248, 173, 173, 0.4) !important; border: unset !important;}
    
    /* Quoted Message Block */
    .markdown-body blockquote{
        color: #70ACD5 !important;
    }
    blockquote .small,
    blockquote .small::before,
    blockquote .small::after,
    blockquote footer,
    blockquote footer::before,
    blockquote .small::after,
    blockquote small,
    blockquote small::before,
    blockquote small::after{
        color: #5CA1CC !important;
        margin: 6px auto 3px auto !important;
    }
    
    /* Code Block */
    @supports selector(:has(*)){
        pre:has(>code){
            color: #ccc !important;
            background: #20232f !important;
        }
        code{
            line-height: 1.4 !important;
        }

        .hljs span[class~="comment"]{     	   color: #6d7a72 !important; }
        .hljs span[class~="constant"]{    	   color: #eba4ac !important; }
        .hljs span[class~="function"]{    	   color: #ffc85b !important; }
        .hljs span[class~="keyword"]{     	   color: #dcbff2 !important; }
        .hljs span[class~="number"]{     	   color: #ff38a2 !important; }
        .hljs span[class~="parameter"]{   	   color: #9cd162 !important; }
        .hljs span[class~="punctuation"]{ 	   color: #d971d3 !important; }
        .hljs span[class~="string"]{      	   color: #fae8b6 !important; }
        .hljs span[class~="string-property"]{  color: #fae8b6 !important; }
        .hljs span[class~="property"]{    	   color: unset !important; }
        .hljs span[class~="literal-property"]{ color: #ccc !important; }
        .hljs span[class~="operator"]{         color: #ccc !important; background: unset !important; }
    }
    
    /* Table */
    .markdown-body table tr, 
    .markdown-body table th, 
    .markdown-body table td{
        border: solid 1px #aaa;
        background: unset !important; }
    .markdown-body table tr:hover{
        background: rgba(109, 179, 217, 0.2) !important; }
    
    /* Promotions in the bottom. #notes-recommendations */
    /* Hide those weird bottom-border */
    .border-b{ border: unset !important; }
    /* Unsetting illegible font color. */
    .text-gray-850{ color: unset !important; }

</style>

<!-------------------------------------------------------------------------------------------------- 

                                    .&#///////////(@@                                               
                           *@(////&        .@////////////.                                          
                     .&//////(%                 (///////// *,                                       
                   #///////&                      %///////....%                                     
                   #//////,                  ....   (///(/,... ,,                /                  
                    #////%        /@%((((((//////////////#(,.....%              /.,\
                      (#//&  *%((((((###(////////////&///@//......%            /,...,*
                          %///((//((/////////(///////&//&///#/.....@          /,....../
                       &///(////#////////////////////#((/(((/#//*...#           *...*
                    (/////////////////////////////((///////((///////&/%          \*/
                  %////(///////////////////////(//////////////@/////%/*#
                 (////////////#///////////////////////////////&////@(*.../
                #///////////////////////////////////(////////#///@*..*....*
               (////(////////(/////////////////(///(//#//*///////////*...,@
               %///#/,/////(//////./,//////////(/////%//(/////////////////%
               ///((*/////#///#////////////////(##((((%%#%//////////(//(///*
               ,.////////#////#///%/////////////**//////(///////////#//%(//&
               /..(/////(/((/%,,//&(//////////(%  ,///////(/(//////////%(///            &,*,
               #.*//////%#//(.. *@//,%////////(*      (/////##/////////#////#            ..%
               %/(//////#(/(      #/ ,.%//////(  .%%(%#((##((/#//////#/(//////&         (..(
              %(////(///%/(/(&%%((%%(%.*.#/////( .(  .....,,(//(///////#////////##,,,,/%./%
             %(////#////##%   (....,   #%#%#(///.   (...* .*  .(/(////(/////////////////@
            #//##///////#(    ,... *,    . ,(%///#   /......   /,*(////%%&&%#//////%&
          %/#((((///////%,/   ,...//.      *,.%(.  .  ,((#*.......#/////%(((((#(((
       (//%(((##(///////%,,&.../(/...         .      .........,...&///(///#(////#(&
    %///(/////#////&&///(*,,%...,,.                  ......  %./((((//@((((&&////((#
///////////%(//&(((((@////##,%...                          ((%#((//#//((((((#(/////((%
%(//////(@///#((#(((((#////#((&             ..**.       #((((%(///(//%((#//////////(//#(
,%((((((////////(((#((((&///%((((((&.              .##(((#(((@///#/%(((##////////////(////%
((((#//////////(%(((#((((((%%((#(#(((((((*((**,//,/((((((((((///////(#//%((#/////////(/////##/&
(%////////////((((((((((((((#(((((((((((@,,,,,,,,,/(#((((##(%///////////@((%/(//////////(////&,*%/&
//////////////(/((((((#(((((%/(((#((((((,,,,,,,,,,,%(((((((&/////(#/////#((((%((///////(((/(///#*,,&
///////////*&((/(((((((((#((#//(((%((((*,,,,,,,,,,,,*(&((&///////(/#/////#((#(((#@/&,(/#(((///((///%
////(/////#/(#//(((((((((#((#/%(((((%%*,&(,,,,,,,,,,,,,&/(//////&(#/(/////#((#(((((&/*%(((((*//#,,#/
(//////%(  ((#////(((((((((%&(#@&&&,,,,&/&,,,,,,,,,,%#(////////%(#((%/(////&(##(((((//((((((&(//#
%///(&     &(//////#((((((((&%&&&&&*,,,,#//%,,,/&///////////(&&&&&(((((/&(//(#((##//%((#(((((,//#
/(&         #////%//(%&(,,,%/,#&&&&@,,,,*,/(/////////////#,.&&&&&& .#* /&#((&&%#&##(((((#((((#///#
(            (//%/& #,,,,,&/*,,&&&&&*..           ....     &&&&&&.   .  #* ( ((((((%%((((((((((#,*&(
             /. %///&*,*@///,*.@&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&*         &,   (((#((%//////////////
             /   (///////&**   ,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%         #.     %((%(%#(#((((((%((##
 
--------------------------------------------------------------------------------------------------->
