---
# System prepended metadata

title: HackMD Dark Theme
tags: [theme]

---

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


