---
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 .hljs-doctag,:root[theme=light] :not([theme])>*>.markdown-body .hljs-keyword,:root[theme=light] :not([theme])>*>.markdown-body .hljs-meta .hljs-keyword,:root[theme=light] :not([theme])>*>.markdown-body .hljs-template-tag,:root[theme=light] :not([theme])>*>.markdown-body .hljs-template-variable,:root[theme=light] :not([theme])>*>.markdown-body .hljs-type,:root[theme=light] :not([theme])>*>.markdown-body .hljs-variable.language_,:root[theme] [theme=light] .markdown-body .hljs-doctag,:root[theme] [theme=light] .markdown-body .hljs-keyword,:root[theme] [theme=light] .markdown-body .hljs-meta .hljs-keyword,:root[theme] [theme=light] .markdown-body .hljs-template-tag,:root[theme] [theme=light] .markdown-body .hljs-template-variable,:root[theme] [theme=light] .markdown-body .hljs-type,:root[theme] [theme=light] .markdown-body .hljs-variable.language_ {
color: #f47067
}

:root[theme=light] :not([theme])>*>.markdown-body .hljs-title,:root[theme=light] :not([theme])>*>.markdown-body .hljs-title.class_,:root[theme=light] :not([theme])>*>.markdown-body .hljs-title.class_.inherited__,:root[theme=light] :not([theme])>*>.markdown-body .hljs-title.function_,:root[theme] [theme=light] .markdown-body .hljs-title,:root[theme] [theme=light] .markdown-body .hljs-title.class_,:root[theme] [theme=light] .markdown-body .hljs-title.class_.inherited__,:root[theme] [theme=light] .markdown-body .hljs-title.function_ {
color: #dcbdfb
}

:root[theme=light] :not([theme])>*>.markdown-body .hljs-attr,:root[theme=light] :not([theme])>*>.markdown-body .hljs-attribute,:root[theme=light] :not([theme])>*>.markdown-body .hljs-literal,:root[theme=light] :not([theme])>*>.markdown-body .hljs-meta,:root[theme=light] :not([theme])>*>.markdown-body .hljs-number,:root[theme=light] :not([theme])>*>.markdown-body .hljs-operator,:root[theme=light] :not([theme])>*>.markdown-body .hljs-variable,:root[theme=light] :not([theme])>*>.markdown-body .hljs-selector-attr,:root[theme=light] :not([theme])>*>.markdown-body .hljs-selector-class,:root[theme=light] :not([theme])>*>.markdown-body .hljs-selector-id,:root[theme] [theme=light] .markdown-body .hljs-attr,:root[theme] [theme=light] .markdown-body .hljs-attribute,:root[theme] [theme=light] .markdown-body .hljs-literal,:root[theme] [theme=light] .markdown-body .hljs-meta,:root[theme] [theme=light] .markdown-body .hljs-number,:root[theme] [theme=light] .markdown-body .hljs-operator,:root[theme] [theme=light] .markdown-body .hljs-variable,:root[theme] [theme=light] .markdown-body .hljs-selector-attr,:root[theme] [theme=light] .markdown-body .hljs-selector-class,:root[theme] [theme=light] .markdown-body .hljs-selector-id {
color: #6cb6ff
}

:root[theme=light] :not([theme])>*>.markdown-body .hljs-regexp,:root[theme=light] :not([theme])>*>.markdown-body .hljs-string,:root[theme=light] :not([theme])>*>.markdown-body .hljs-meta .hljs-string,:root[theme] [theme=light] .markdown-body .hljs-regexp,:root[theme] [theme=light] .markdown-body .hljs-string,:root[theme] [theme=light] .markdown-body .hljs-meta .hljs-string {
color: #96d0ff
}

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

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

:root[theme=light] :not([theme])>*>.markdown-body .hljs-name,:root[theme=light] :not([theme])>*>.markdown-body .hljs-quote,:root[theme=light] :not([theme])>*>.markdown-body .hljs-selector-tag,:root[theme=light] :not([theme])>*>.markdown-body .hljs-selector-pseudo,:root[theme] [theme=light] .markdown-body .hljs-name,:root[theme] [theme=light] .markdown-body .hljs-quote,:root[theme] [theme=light] .markdown-body .hljs-selector-tag,:root[theme] [theme=light] .markdown-body .hljs-selector-pseudo {
color: #8ddb8c
}

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

:root[theme=light] :not([theme])>*>.markdown-body .hljs-section,:root[theme] [theme=light] .markdown-body .hljs-section {
color: #316dca;
font-weight: 700
}

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

:root[theme=light] :not([theme])>*>.markdown-body .hljs-emphasis,:root[theme] [theme=light] .markdown-body .hljs-emphasis {
color: #adbac7;
font-style: italic
}

:root[theme=light] :not([theme])>*>.markdown-body .hljs-strong,:root[theme] [theme=light] .markdown-body .hljs-strong {
color: #adbac7;
font-weight: 700
}

:root[theme=light] :not([theme])>*>.markdown-body .hljs-addition,:root[theme] [theme=light] .markdown-body .hljs-addition {
color: #b4f1b4;
background-color: #1b4721
}

:root[theme=light] :not([theme])>*>.markdown-body .hljs-deletion,:root[theme] [theme=light] .markdown-body .hljs-deletion {
color: #ffd8d3;
background-color: #78191b
}

:root[theme=light] :not([theme])>*>.markdown-body code[class*=language-],:root[theme=light] :not([theme])>*>.markdown-body pre[class*=language-],:root[theme] [theme=light] .markdown-body code[class*=language-],:root[theme] [theme=light] .markdown-body pre[class*=language-] {
color: #ccc;
background: none;
font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
tab-size: 4;
-webkit-hyphens: none;
hyphens: none
}

:root[theme=light] :not([theme])>*>.markdown-body pre[class*=language-],:root[theme] [theme=light] .markdown-body pre[class*=language-] {
padding: 1em;
margin: .5em 0;
overflow: auto
}

:root[theme=light] :not([theme])>*>.markdown-body :not(pre)>code[class*=language-],:root[theme=light] :not([theme])>*>.markdown-body pre[class*=language-],:root[theme] [theme=light] .markdown-body :not(pre)>code[class*=language-],:root[theme] [theme=light] .markdown-body pre[class*=language-] {
background: #2d2d2d
}

:root[theme=light] :not([theme])>*>.markdown-body :not(pre)>code[class*=language-],:root[theme] [theme=light] .markdown-body :not(pre)>code[class*=language-] {
padding: .1em;
border-radius: .3em;
white-space: normal
}

:root[theme=light] :not([theme])>*>.markdown-body .token.comment,:root[theme=light] :not([theme])>*>.markdown-body .token.block-comment,:root[theme=light] :not([theme])>*>.markdown-body .token.prolog,:root[theme=light] :not([theme])>*>.markdown-body .token.doctype,:root[theme=light] :not([theme])>*>.markdown-body .token.cdata,:root[theme] [theme=light] .markdown-body .token.comment,:root[theme] [theme=light] .markdown-body .token.block-comment,:root[theme] [theme=light] .markdown-body .token.prolog,:root[theme] [theme=light] .markdown-body .token.doctype,:root[theme] [theme=light] .markdown-body .token.cdata {
color: #999
}

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

:root[theme=light] :not([theme])>*>.markdown-body .token.tag,:root[theme=light] :not([theme])>*>.markdown-body .token.attr-name,:root[theme=light] :not([theme])>*>.markdown-body .token.namespace,:root[theme=light] :not([theme])>*>.markdown-body .token.deleted,:root[theme] [theme=light] .markdown-body .token.tag,:root[theme] [theme=light] .markdown-body .token.attr-name,:root[theme] [theme=light] .markdown-body .token.namespace,:root[theme] [theme=light] .markdown-body .token.deleted {
color: #e2777a
}

:root[theme=light] :not([theme])>*>.markdown-body .token.function-name,:root[theme] [theme=light] .markdown-body .token.function-name {
color: #6196cc
}

:root[theme=light] :not([theme])>*>.markdown-body .token.boolean,:root[theme=light] :not([theme])>*>.markdown-body .token.number,:root[theme=light] :not([theme])>*>.markdown-body .token.function,:root[theme] [theme=light] .markdown-body .token.boolean,:root[theme] [theme=light] .markdown-body .token.number,:root[theme] [theme=light] .markdown-body .token.function {
color: #f08d49
}

:root[theme=light] :not([theme])>*>.markdown-body .token.property,:root[theme=light] :not([theme])>*>.markdown-body .token.class-name,:root[theme=light] :not([theme])>*>.markdown-body .token.constant,:root[theme=light] :not([theme])>*>.markdown-body .token.symbol,:root[theme] [theme=light] .markdown-body .token.property,:root[theme] [theme=light] .markdown-body .token.class-name,:root[theme] [theme=light] .markdown-body .token.constant,:root[theme] [theme=light] .markdown-body .token.symbol {
color: #f8c555
}

:root[theme=light] :not([theme])>*>.markdown-body .token.selector,:root[theme=light] :not([theme])>*>.markdown-body .token.important,:root[theme=light] :not([theme])>*>.markdown-body .token.atrule,:root[theme=light] :not([theme])>*>.markdown-body .token.keyword,:root[theme=light] :not([theme])>*>.markdown-body .token.builtin,:root[theme] [theme=light] .markdown-body .token.selector,:root[theme] [theme=light] .markdown-body .token.important,:root[theme] [theme=light] .markdown-body .token.atrule,:root[theme] [theme=light] .markdown-body .token.keyword,:root[theme] [theme=light] .markdown-body .token.builtin {
color: #cc99cd
}

:root[theme=light] :not([theme])>*>.markdown-body .token.string,:root[theme=light] :not([theme])>*>.markdown-body .token.char,:root[theme=light] :not([theme])>*>.markdown-body .token.attr-value,:root[theme=light] :not([theme])>*>.markdown-body .token.regex,:root[theme=light] :not([theme])>*>.markdown-body .token.variable,:root[theme] [theme=light] .markdown-body .token.string,:root[theme] [theme=light] .markdown-body .token.char,:root[theme] [theme=light] .markdown-body .token.attr-value,:root[theme] [theme=light] .markdown-body .token.regex,:root[theme] [theme=light] .markdown-body .token.variable {
color: #7ec699
}

: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] [theme=light] .markdown-body .token.operator,:root[theme] [theme=light] .markdown-body .token.entity,:root[theme] [theme=light] .markdown-body .token.url {
color: #67cdcc
}

:root[theme=light] :not([theme])>*>.markdown-body .token.important,:root[theme=light] :not([theme])>*>.markdown-body .token.bold,:root[theme] [theme=light] .markdown-body .token.important,:root[theme] [theme=light] .markdown-body .token.bold {
font-weight: 700
}

:root[theme=light] :not([theme])>*>.markdown-body .token.italic,:root[theme] [theme=light] .markdown-body .token.italic {
font-style: italic
}

:root[theme=light] :not([theme])>*>.markdown-body .token.entity,:root[theme] [theme=light] .markdown-body .token.entity {
cursor: help
}

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

: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: #333;
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: #fbbf24!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>

.center-column {
display: flex;
flex-direction: column;
align-items: center;
}

.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;
}

.deletion {
color: #ffd8d3;
background-color: #78191b;
}

.addition {
color: #b4f1b4;
background-color: #1b4721;
}

/* 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: #F5DEB3;
}

.markdown-body h4{
color: #B3EBF5;
}

.markdown-body h5 {
color: #BFD9C8;
}

.markdown-body h6 {
color: #D6C7C0;
}

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

</style>