---
title: HackMD Dark Theme
tags: theme
description: Use `{%hackmd aPqG0f7uS3CSdeXvHSYQKQ %}` to include this theme.
---

<style>

/*這段是因為 hackmd 在使用自訂 CSS 時預設的 theme 為 light，但我找不到地方調成 dark，所以就很暴力的把 light 的內容全部用 dark 替換掉了*/

:root[theme=light] :not([theme])>*>.markdown-body,:root[theme] [theme=light] .markdown-body {
color: #d4d4d8
}

:root[theme=light] :not([theme])>*>.markdown-body h1,:root[theme=light] :not([theme])>*>.markdown-body h2,:root[theme] [theme=light] .markdown-body h1,:root[theme] [theme=light] .markdown-body h2 {
border-bottom-color: #FBFBFB
}

:root[theme=light] :not([theme])>*>.markdown-body h6,:root[theme] [theme=light] .markdown-body h6 {
color: #a1a1aa
}

:root[theme=light] :not([theme])>*>.markdown-body details,:root[theme] [theme=light] .markdown-body details {
background-color: #303036;
color: #d4d4d8
}

:root[theme=light] :not([theme])>*>.markdown-body details summary::marker:first-child,:root[theme] [theme=light] .markdown-body details summary::marker:first-child {
color: #d4d4d8
}

:root[theme=light] :not([theme])>*>.markdown-body details:hover,:root[theme] [theme=light] .markdown-body details:hover {
background: #303036
}

:root[theme=light] :not([theme])>*>.markdown-body details[open]:hover,:root[theme] [theme=light] .markdown-body details[open]:hover {
background-color: #303036
}

:root[theme=light] :not([theme])>*>.markdown-body details code,:root[theme] [theme=light] .markdown-body details code {
background-color: #303036
}

:root[theme=light] :not([theme])>*>.markdown-body hr,:root[theme] [theme=light] .markdown-body hr {
background-color: #52525b
}

:root[theme=light] :not([theme])>*>.markdown-body blockquote,:root[theme] [theme=light] .markdown-body blockquote {
border-left-color: #71717a;
color: #a1a1aa
}

:root[theme=light] :not([theme])>*>.markdown-body blockquote a span,:root[theme] [theme=light] .markdown-body blockquote a span {
color: #9894f9
}

:root[theme=light] :not([theme])>*>.markdown-body a.mention-anchor.user-card-popover,:root[theme] [theme=light] .markdown-body a.mention-anchor.user-card-popover {
color: #9894f9;
background-color: #453aff26
}

:root[theme=light] :not([theme])>*>.markdown-body ::selection,:root[theme] [theme=light] .markdown-body ::selection {
background-color: #453aff99
}

:root[theme=light] :not([theme])>*>.markdown-body .alert.alert-info,:root[theme] [theme=light] .markdown-body .alert.alert-info {
background-color: #38bdf81a;
color: #38bdf8;
border-left-color: #0ea5e9
}

:root[theme=light] :not([theme])>*>.markdown-body .alert.alert-warning,:root[theme] [theme=light] .markdown-body .alert.alert-warning {
background-color: #fbbf241a;
color: #f59e0b;
border-left-color: #f59e0b
}

:root[theme=light] :not([theme])>*>.markdown-body .alert.alert-success,:root[theme] [theme=light] .markdown-body .alert.alert-success {
background-color: #6db19d26;
color: #6db19d;
border-left-color: #55b685
}

:root[theme=light] :not([theme])>*>.markdown-body .alert.alert-danger,:root[theme] [theme=light] .markdown-body .alert.alert-danger {
background-color: #ef444433;
color: #f87171;
border-left-color: #ef4444
}

:root[theme=light] :not([theme])>*>.markdown-body .mark,:root[theme=light] :not([theme])>*>.markdown-body mark,:root[theme] [theme=light] .markdown-body .mark,:root[theme] [theme=light] .markdown-body mark {
color: #f59e0b;
background-color: #fbbf241a
}

:root[theme=light] :not([theme])>*>.markdown-body .mark span,:root[theme=light] :not([theme])>*>.markdown-body mark span,:root[theme] [theme=light] .markdown-body .mark span,:root[theme] [theme=light] .markdown-body mark span {
color: #fbbf24
}

:root[theme=light] :not([theme])>*>.markdown-body pre,:root[theme=light] :not([theme])>*>.markdown-body .highlight pre,:root[theme] [theme=light] .markdown-body pre,:root[theme] [theme=light] .markdown-body .highlight pre {
background-color: #303036;
color: #a1a1aa
}

:root[theme=light] :not([theme])>*>.markdown-body .token.operator,:root[theme=light] :not([theme])>*>.markdown-body .token.entity,:root[theme=light] :not([theme])>*>.markdown-body .token.url,:root[theme=light] :not([theme])>*>.markdown-body.language-css,:root[theme=light] :not([theme])>*>.markdown-body.token.string,:root[theme=light] :not([theme])>*>.markdown-body .style .token.string,:root[theme] [theme=light] .markdown-body .token.operator,:root[theme] [theme=light] .markdown-body .token.entity,:root[theme] [theme=light] .markdown-body .token.url,:root[theme] [theme=light] .markdown-body.language-css,:root[theme] [theme=light] .markdown-body.token.string,:root[theme] [theme=light] .markdown-body .style .token.string {
background: none
}

:root[theme=light] :not([theme])>*>.markdown-body :not(pre)>code,:root[theme] [theme=light] .markdown-body :not(pre)>code {
background-color: #3f3f46
}

:root[theme=light] :not([theme])>*>.markdown-body code .hljs-tag,:root[theme] [theme=light] .markdown-body code .hljs-tag {
color: #d4d4d8
}

:root[theme=light] :not([theme])>*>.markdown-body code .hljs-keyword,:root[theme=light] :not([theme])>*>.markdown-body code .hljs-selector-tag,:root[theme=light] :not([theme])>*>.markdown-body code .hljs-type,:root[theme=light] :not([theme])>*>.markdown-body code .token.property,:root[theme=light] :not([theme])>*>.markdown-body code .token.tag,:root[theme=light] :not([theme])>*>.markdown-body code .token.boolean,:root[theme=light] :not([theme])>*>.markdown-body code .token.number,:root[theme=light] :not([theme])>*>.markdown-body code .token.constant,:root[theme=light] :not([theme])>*>.markdown-body code .token.symbol,:root[theme=light] :not([theme])>*>.markdown-body code .token.deleted,:root[theme] [theme=light] .markdown-body code .hljs-keyword,:root[theme] [theme=light] .markdown-body code .hljs-selector-tag,:root[theme] [theme=light] .markdown-body code .hljs-type,:root[theme] [theme=light] .markdown-body code .token.property,:root[theme] [theme=light] .markdown-body code .token.tag,:root[theme] [theme=light] .markdown-body code .token.boolean,:root[theme] [theme=light] .markdown-body code .token.number,:root[theme] [theme=light] .markdown-body code .token.constant,:root[theme] [theme=light] .markdown-body code .token.symbol,:root[theme] [theme=light] .markdown-body code .token.deleted {
color: #ff70b4
}

:root[theme=light] :not([theme])>*>.markdown-body code .hljs-number,:root[theme=light] :not([theme])>*>.markdown-body code .hljs-literal,:root[theme=light] :not([theme])>*>.markdown-body code .hljs-symbol,:root[theme=light] :not([theme])>*>.markdown-body code .hljs-bullet,:root[theme=light] :not([theme])>*>.markdown-body code .hljs-attribute,:root[theme=light] :not([theme])>*>.markdown-body code .token.atrule,:root[theme=light] :not([theme])>*>.markdown-body code .token.attr-value,:root[theme=light] :not([theme])>*>.markdown-body code .token.keyword,:root[theme] [theme=light] .markdown-body code .hljs-number,:root[theme] [theme=light] .markdown-body code .hljs-literal,:root[theme] [theme=light] .markdown-body code .hljs-symbol,:root[theme] [theme=light] .markdown-body code .hljs-bullet,:root[theme] [theme=light] .markdown-body code .hljs-attribute,:root[theme] [theme=light] .markdown-body code .token.atrule,:root[theme] [theme=light] .markdown-body code .token.attr-value,:root[theme] [theme=light] .markdown-body code .token.keyword {
color: #9894f9
}

:root[theme=light] :not([theme])>*>.markdown-body pre.part.plugin-rendered,:root[theme] [theme=light] .markdown-body pre.part.plugin-rendered {
background-color: #fff;
color: #000
}

:root[theme=light] :not([theme])>*>.markdown-body table,:root[theme] [theme=light] .markdown-body table {
border-color: #52525b
}

:root[theme=light] :not([theme])>*>.markdown-body table thead tr,:root[theme] [theme=light] .markdown-body table thead tr {
background-color: #303036;
border-bottom-color: #52525b
}

:root[theme=light] :not([theme])>*>.markdown-body table th,:root[theme=light] :not([theme])>*>.markdown-body table td,:root[theme] [theme=light] .markdown-body table th,:root[theme] [theme=light] .markdown-body table td {
border-left-color: #52525b;
border-top-color: #52525b
}

:root[theme=light] :not([theme])>*>.markdown-body table tr:nth-child(2n),:root[theme=light] :not([theme])>*>.markdown-body table tbody tr,:root[theme] [theme=light] .markdown-body table tr:nth-child(2n),:root[theme] [theme=light] .markdown-body table tbody tr {
background-color: #27272a
}

:root[theme] body[data-view-theme=light] {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity))
}

:root[theme=light] :not([theme]) .cm-matchhighlight,:root[theme] [theme=light] .cm-matchhighlight {
background-color: #453aff99;
color: #f4f4f5!important
}

:root[theme=light] :not([theme]) .cm-searching,:root[theme] [theme=light] .cm-searching {
background-color: #fcd34d!important;
color: #18181b!important
}

:root[theme=light] :not([theme]) .ui-edit-area .ui-resizable-handle.ui-resizable-e:hover,:root[theme] [theme=light] .ui-edit-area .ui-resizable-handle.ui-resizable-e:hover {
border-width: 0px;
border-left-width: 3px;
border-style: solid;
border-color: var(--hmd-tw-border-subtler)
}

:root[theme=light] :not([theme]) .ui-edit-area .ui-sync-toggle,:root[theme] [theme=light] .ui-edit-area .ui-sync-toggle {
transition: all .1s;
color: #d4d4d8;
background-color: #3f3f46;
border-color: #52525b
}

:root[theme=light] :not([theme]) .ui-edit-area .ui-sync-toggle:hover,:root[theme] [theme=light] .ui-edit-area .ui-sync-toggle:hover {
color: #fafafa;
background-color: #52525b;
border-color: #71717a
}

:root, :root[theme=light],:root[theme] [theme=light] {
--hmd-tw-text-default: #D4D4D8 !important;
--hmd-tw-text-subtle: #A1A1AA !important;
--hmd-tw-text-subtler: #71717A !important;
--hmd-tw-text-emphasize: #F4F4F5 !important;
--hmd-tw-text-primary: #9894F9 !important;
--hmd-tw-text-pink: #FF4CA2 !important;
--hmd-tw-background-default: #27272A !important;
--hmd-tw-background-subtle: #52525B !important;
--hmd-tw-background-subtler: #303036 !important;
--hmd-tw-background-sunken: #18181B !important;
--hmd-tw-background-selected: #52525B !important;
--hmd-tw-background-primary-default: #564DFF !important;
--hmd-tw-background-primary-subtler: #2c2a4a !important;
--hmd-tw-background-primary-subtle: #302d6a !important;
--hmd-tw-background-primary-hover: #766DF8 !important;
--hmd-tw-background-primary-disabled: #3932aa !important;
--hmd-tw-background-primary-focus: #766DF8 !important;
--hmd-tw-background-blur: rgba(39, 39, 42, .6) !important;
--hmd-tw-icon-default: #D4D4D8 !important;
--hmd-tw-icon-subtle: #A1A1AA !important;
--hmd-tw-icon-subtler: #71717A !important;
--hmd-tw-icon-subtlest: #52525B !important;
--hmd-tw-icon-disabled: #71717A !important;
--hmd-tw-icon-primary: var(--hmd-tw-text-primary) !important;
--hmd-tw-icon-emphasize: #F4F4F5 !important;
--hmd-tw-border-default: #52525B !important;
--hmd-tw-border-bold: #D4D4D8 !important;
--hmd-tw-border-subtle: #A1A1AA !important;
--hmd-tw-border-subtler: #71717A !important;
--hmd-tw-border-subtlest: #3F3F46 !important;
--hmd-tw-border-primary-focus: #766DF8 !important;
--hmd-tw-border-primary-default: #9894F9 !important;
--hmd-tw-border-primary-subtler: #766DF8 !important;
--hmd-tw-overlay: rgba(0, 0, 0, .7) !important;
--hmd-tw-state-info-text: #38bdf8 !important;
--hmd-tw-state-info-icon: #0ea5e9 !important;
--hmd-tw-state-info-background: #38BDF81A !important;
--hmd-tw-state-info-border: #0284c7 !important;
--hmd-tw-state-info-border-subtle: rgba(56, 189, 248, .2) !important;
--hmd-tw-state-info-default: #0ea5e9 !important;
--hmd-tw-state-success-text: #59C335 !important;
--hmd-tw-state-success-icon: #59C335 !important;
--hmd-tw-state-success-background: #6DB19D26 !important;
--hmd-tw-state-success-border: #43946C !important;
--hmd-tw-state-success-border-subtle: rgba(107, 209, 157, .2) !important;
--hmd-tw-state-success-default: #59C335 !important;
--hmd-tw-state-warning-text: #fbbf24 !important;
--hmd-tw-state-warning-icon: #fbbf24 !important;
--hmd-tw-state-warning-background: #FBBF241A !important;
--hmd-tw-state-warning-border: #f59e0b !important;
--hmd-tw-state-warning-border-subtle: rgba(251, 191, 36, .2) !important;
--hmd-tw-state-warning-default: #f59e0b !important;
--hmd-tw-state-danger-text: #f87171 !important;
--hmd-tw-state-danger-icon: #f87171 !important;
--hmd-tw-state-danger-bg-light: #EF444433 !important;
--hmd-tw-state-danger-bg-default: #ef4444 !important;
--hmd-tw-state-danger-bg-hover: #f87171 !important;
--hmd-tw-state-danger-border: #f87171 !important;
--hmd-tw-state-danger-border-subtle: rgba(239, 68, 68, .3) !important;
--hmd-tw-state-default-background: #52525B !important;
--hmd-tw-element-text-selected: #fff !important;
--hmd-tw-element-text-disabled: #71717A !important;
--hmd-tw-element-bg-default: var(--hmd-tw-background-subtler) !important;
--hmd-tw-element-bg-hover: #3F3F46 !important;
--hmd-tw-element-bg-disabled: #303036 !important;
--hmd-tw-element-border-hover: #71717A !important;
--hmd-tw-element-border-focus: #71717A !important;
--hmd-tw-element-border-error: #f87171 !important;
--hmd-tw-element-border-disabled: var(--hmd-tw-border-subtler) !important;
--hmd-tw-raised-bg-default: #3F3F46 !important;
--hmd-tw-raised-bg-hover: #52525B !important;
--hmd-tw-raised-border-default: #52525B !important;
--hmd-tw-raised-border-hover: #71717A !important;
--hmd-tw-raised-icon-hover: #FAFAFA !important;
--hmd-tw-raised-icon-default: #D4D4D8 !important;
--hmd-tw-link-text-default: #9894F9 !important;
--hmd-tw-link-text-hover: #B2ABFB !important;
--hmd-tw-link-text-pressed: #B2ABFB !important;
--hmd-tw-text-mark-comment-default: #453AFF4D !important;
--hmd-tw-text-mark-comment-selected: #453AFF99 !important;
--hmd-tw-text-mark-diff-del: #EF444433 !important;
--hmd-tw-text-mark-diff-ins: #6DB19D4D !important;
--hmd-tw-text-mark-suggest-default: rgba(64, 255, 106, .2) !important;
--hmd-tw-text-mark-suggest-selected: rgba(64, 255, 106, .4) !important;
--hmd-tw-text-mark-suggest-border: #6DB19D !important;
--hmd-tw-prime-border: #fbbf24 !important;
--hmd-tw-prime-default: #fbbf24 !important;
}

</style>

<style>
.green {
color:#29E5A9;
}

.yellow {
color:#F1EF78;
}

.brown {
color:#990000;
}

.pink {
color:#DD9FBD;
}

.red {
color:#E71B18 ;
}

.orange {
color:#E8A635;
}

.purple {
color:#AC9FDD;
}

.blue {
color:#20DEE5;
}

.ivory {
color:#FFFFF0;
}

.pearl {
color:#EAE0C8;
}

.beige {
color:#F5F5DC;
}

.cornsilk {
color:#FFF8DC;
}

.gainsboro {
color:#DCDCDC;
}

.light_grey {
color:#D3D3D3;
}

.silver {
color:#C0C0C0;
}

.dark_grey {
color:#A9A9A9;
}

.wheat {
color:#F5DEB3;
}

.burlywood {
color:#DEB887;
}

.tan {
color:#D2B48C;
}

/* https:\//english.cool\/colors\/ 這裡很多顏色，把反斜線去掉 */

a.redlink {
color:#DB1859;
}

a.redlink:link {
color:#DB1859;
text-decoration:none;
}

a.redlink:visiteid {
color:#DB1859;
text-decoration:none;
}

a.redlink:hover {
color:#19CABC;
text-decoration:none;
}

a.redlink:active {
color:#DB1859;
text-decoration:underline;
background:#FFFFFF;
}

a.pinklink {
color:#DD9FBD;
text-decoration:none;
}
a.pinklink:visiteid {
color:#DD9FBD;
text-decoration:none;
}
a.pinklink:hover {
color:#19CABC;
text-decoration:none;
}
a.pinklink:active {
color:#DD9FBD;
text-decoration:underline;
background:#FFFFFF;
}

a.wheatlink {
color:wheat;
text-decoration:none;
}
a.wheatlink:visiteid {
color:wheat;
text-decoration:none;
}
a.wheatlink:hover {
color:#19CABC;
text-decoration:none;
}
a.wheatlink:active {
color:wheat;
text-decoration:underline;
background:#FFFFFF;
}

@-webkit-keyframes A
{
0% { color: #C10066;}
10% { color: #CC0000;}
20% { color: #E63F00;}
30% { color: #EE7700;}
40% { color: #DDAA00;}
50% { color: #EEEE00;}
60% { color: #99DD00;}
70% { color: #66DD00;}
80% { color: #3842AF;}
90% { color: #0044BB;}
100% { color: #A500CC;}
}

#animation_title{
animation: A 3s ease 0s infinite alternate;
-webkit-animation: A 3s ease 0s infinite alternate;
}

</style>

<style>
/*書本模式的側欄*/

.summary h1,
.summary h2,
.summary h3,
.summary h4,
.summary h5,
.summary h6 {
color : #9894F9; /*這是書本的標題顏色*/
}

.summary {
border-width: 0px;
border-right-width: 1px;
border-style: solid;
border-color: #52525B;
background-color: #27272A;
color: #D4D4D8;
position: absolute;
left: -304px;
top: 0;
width: 300px;
max-width: 100vw;
height: 100%;
z-index: 3;
padding-top: 50px;
}

</style>

<style>
/*這是標頭顏色*/
.markdown-body h1 {
color: #E8A635;
}

.markdown-body h2 {
color: #29E5A9;
}
.markdown-body h3 {
color: wheat;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color : #FBFBFB;
}

.markdown-body h1,
.markdown-body h2 {
border-bottom-color: #FBFBFB; /*這是線的顏色*/
}

.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: #FBFBFB; /*這是標頭連結的顏色，旁邊小小的那個按鈕的顏色*/
}

.markdown-body img {
background-color: transparent;
}

.markdown-body blockquote {
color: #bcbcbc;
}

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

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

.markdown-body code,
.markdown-body tt {
color: #ddd;
background-color: rgba(230, 230, 230, 0.36); /*這是 `` 的背景顏色*/
}

a, .open-files-container li.selected a {
color: #5EB7E0; /*這是連結的顏色*/
}

.markdown-body pre.flow-chart,
.markdown-body pre.sequence-diagram,
.markdown-body pre.graphviz,
.markdown-body pre.mermaid,
.markdown-body pre.abc {
background-color: #fff !important;
}

</style>