---
tags: theme
title: HackMD Dark Theme
description: no
---

<style>

html, body, .ui-content {
background-color: #111;
color: #ddd;
}

body > .ui-infobar {
display: none;
}

.ui-view-area > .ui-infobar {
display: block;
}

.markdown-body code, .markdown-body tt{
background-color: #fff;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: #fff;
text-align: Center;
}

.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: #333;
}

.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: #fff;
padding:10px;
background-color:rgba(var(--r),var(--g),var(--b),0.125);
border-radius:4px;
}

.markdown-body table tr {
background-color: #5f5f5f;
}

.markdown-body table tr:nth-child(2n) {
background-color: #4f4f4f;
}

.markdown-body code,
.markdown-body tt {
color: #fff !important;
background-color: #fff2;
}

a,
.open-files-container li.selected a {
color: #5EB7E0;
text-align: Center;
}

:root{
--shadow_len:20px;/*模糊擴散等級*/
--margin_size:5px;/*向外留邊*/
--border_width: 2px;/*邊框大小*/
--padding_size: 15px;/*向內留邊*/
--radius:5px;/*圓角大小*/
--after_color:#fff8;/*尾端文字顏色*/
--h1_size: 40px;/*標題文字大小*/
--bg_color:#000;/*被景色*/
--button_width:100px;/*按鈕大小*/

}
.alert-info{
--box_color:#5ff;
--border_color:#aff;
--box_background_color:#5ff2;
color:#fff;
}
.alert-success{
--box_color:#5f5;
--border_color:#afa;
--box_background_color:#5f52;
color:#fff;
}
.alert-warning{
--box_color:#ff5;
--border_color:#ffa;
--box_background_color:#ffa2;
color:#ffa;
}
.alert-danger{
--box_color:#f55;
--border_color:#faa;
--box_background_color:#faa2;
color:#faa;
}

.alert{
margin: calc(var(--margin_size));
border-width: var(--border_width);
border-style: solid;
border-color: var(--border_color);
border-radius:var(--radius);
background-color: var(--box_background_color);
color:#fff;

}
.contains-task-list{
color:#fff;
}

.markdown-body:not(.next-editor) pre{
background-color:#fff2;
padding:8px;

}
.markdown-body ul, .markdown-body ol{
padding-left:20px;
}
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre{
margin-top:2;
margin-bottom:2;
}
#meta-title-tags .text-gray-700{
color:#0000;
}
#meta-title-tags{
height:0;
}

.hljs-keyword{
color:#f3f
}
.hljs-string{
color:#f80
}
.hljs-meta{
color:#5af
}
.hljs-type{
color:#5f0
}
.hljs-title{
color:#f55
}
.hljs-number{
color:#5ff
}
</style>

<style>
/*填滿*/
.wfull{
width: 100%;
}

.text_center{/*文字至中*/
text-align: center;
}

.text_center{/*文字至中*/
text-align: center;
}

/*初始化flex*/
.flex{
display: flex;
}

/*物件水平排版*/
.left{/*元素靠左(預設)*/
justify-content: flex-start;
}
.center{/*元素置中*/
justify-content: center;
}
.right{/*元素靠右*/
justify-content: flex-end;
}
.sparound{/*元素平均分攤，周圍留有固定寬度(邊邊框度=中間/2)*/
justify-content: space-around;
}
.spsame{/*元素平均分攤，空格等大*/
justify-content: space-evenly;
}

/*物件垂直排版*/
.cleft{/*元素靠上(預設)*/
align-content: flex-start;
}
.ccenter{/*元素置中*/
align-content: center;
}
.cright{/*元素靠下*/
align-content: flex-end;
}
.cfull{/*填滿*/
align-content: stretch;
}

/*大小不一樣大的元素對其*/
.ileft{/*元素向上對其(預設)*/
align-items: flex-start;
}
.icenter{/*元素垂直置中*/
align-items: center;
}
.iright{/*元素向下對其(預設)*/
align-items: flex-end;
}
.isame{/*拉成一樣大*/
align-items: stretch;
}

.wrap{/*自動換行*/
flex-wrap: wrap;
}

/*物件排列*/
.row{/*橫向排版(預設)*/
flex-direction: row;
}
.column{/*垂直排版*/
flex-direction: column
}
.row-reverse{/*反橫向排版*/
flex-direction: row-reverse;
}
.column-reverse{/*反直向排版*/
flex-direction: column-reverse;
}

/*文字樣式*/
.t_overline{/*文字上線*/
text-decoration:overline;
}
.t_underline{/*底線*/
text-decoration:underline;
}
.t_delline{/*刪除線*/
text-decoration:line-through;
}
.t_fat{/*粗體*/
font-weight:bold;
}
.t_move{/*斜體*/
font-style:italic;
}

.px-1{
font-size:16px;
color:#fff;
border-radius:5px;
}

blockquote .small, blockquote footer, blockquote small {
display: inline;
font-size: 100%;
line-height: 1;
color: #fff;
}

blockquote .small, blockquote footer, blockquote small {
display: inline;
font-size: 80%;
line-height: 1.42857143;
color: #777;
}

/*.markdown-body .mark, .markdown-body mark{
border:1px solid #fff;
background:#fff2;
border-radius: 3px;
color:#fff;
}*/

*{
--r:255;
--g:255;
--b:255;
}

.markdown-body i,
.markdown-body .mark, .markdown-body mark{
border:1px solid rgba(var(--r),var(--g),var(--b),1);
background:rgba(var(--r),var(--g),var(--b),0.25);
border-radius: 4px;
/*padding: 4px;*/
padding:0;
padding-left:8px;
padding-right:8px;
font: 14px / 1 "Segoe UI Emoji",FontAwesome;
font-size:inherit;
color:#fff;
/* margin-right:1em; */
}
.markdown-body i:before,
.markdown-body .mark:before, .markdown-body mark:before{
color:rgba(var(--r),var(--g),var(--b),1);
}
.tag:before{
content:"\f02b ";
}
.clock:before{
content: "\f017 "
}

.rr,.red{
--r:255 !important;
--g:0;
--b:0;
}
.gg,.green{
--r:0;
--g:255 !important;
--b:0;
}
.bb,.blue{
--r:0;
--g:0;
--b:255 !important;
}

.r{
--r:128 !important;
--g:0;
--b:0;
}
.g{
--r:0;
--g:128 !important;
--b:0;
}
.b{
--r:0;
--g:0;
--b:128 !important;
}

.purple{
--r:255 !important;
--g:0 !important;
--b:255 !important;
}

</style>