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

<style>
:root[theme] :not([theme]) > * > .markdown-body .hljs-doctag,
:root[theme] :not([theme]) > * > .markdown-body .hljs-keyword,
:root[theme] :not([theme]) > * > .markdown-body .hljs-meta .hljs-keyword,
:root[theme] :not([theme]) > * > .markdown-body .hljs-template-tag,
:root[theme] :not([theme]) > * > .markdown-body .hljs-template-variable,
:root[theme] :not([theme]) > * > .markdown-body .hljs-type,
:root[theme] :not([theme]) > * > .markdown-body .hljs-variable.language_,
:root[theme] [theme] .markdown-body .hljs-doctag,
:root[theme] [theme] .markdown-body .hljs-keyword,
:root[theme] [theme] .markdown-body .hljs-meta .hljs-keyword,
:root[theme] [theme] .markdown-body .hljs-template-tag,
:root[theme] [theme] .markdown-body .hljs-template-variable,
:root[theme] [theme] .markdown-body .hljs-type,
:root[theme] [theme] .markdown-body .hljs-variable.language_ {
color: #f47067;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

:root[theme] :not([theme]) > * > .markdown-body code[class*='language-'],
:root[theme] :not([theme]) > * > .markdown-body pre[class*='language-'],
:root[theme] [theme] .markdown-body code[class*='language-'],
:root[theme] [theme] .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] :not([theme]) > * > .markdown-body pre[class*='language-'],
:root[theme] [theme] .markdown-body pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}

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

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

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

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

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

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

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

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

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

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

:root[theme] :not([theme]) > * > .markdown-body .token.operator,
:root[theme] :not([theme]) > * > .markdown-body .token.entity,
:root[theme] :not([theme]) > * > .markdown-body .token.url,
:root[theme] [theme] .markdown-body .token.operator,
:root[theme] [theme] .markdown-body .token.entity,
:root[theme] [theme] .markdown-body .token.url {
color: #67cdcc;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root[theme] :not([theme]) .cm-searching,
:root[theme] [theme] .cm-searching {
background-color: #fbbf24 !important;
}

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

:root[theme] :not([theme]) .ui-edit-area .ui-resizable-handle.ui-resizable-e:hover,
:root[theme] [theme] .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] :not([theme]) .ui-edit-area .ui-sync-toggle,
:root[theme] [theme] .ui-edit-area .ui-sync-toggle {
transition: all 0.1s;
color: #d4d4d8;
background-color: #3f3f46;
border-color: #52525b;
}

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

:root,
:root[theme],
:root[theme] [theme] {
--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, 0.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, 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, 0.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, 0.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, 0.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, 0.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: #48c4f9 !important;
--hmd-tw-link-text-hover: #62dbfb !important;
--hmd-tw-link-text-pressed: #62dbfb !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, 0.2) !important;
--hmd-tw-text-mark-suggest-selected: rgba(64, 255, 106, 0.4) !important;
--hmd-tw-text-mark-suggest-border: #6db19d !important;
--hmd-tw-prime-border: #fbbf24 !important;
--hmd-tw-prime-default: #fbbf24 !important;
}

:root {
scrollbar-color: #777 transparent;
}

table,
pre:has(code) {
scrollbar-width: thin;
scrollbar-color: #777 transparent;
}

table {
max-width: 100%;
}

table :is(th, td) {
text-wrap: nowrap;
}

#summary {
padding-bottom: calc(100vh - 9rem) !important;
scrollbar-width: none;
}

#summary::before {
position: absolute;
inset: 0;
z-index: -1;
display: block;
background: url('https://hackmd.io/_uploads/BJ3_Zp_Nye.jpg') 42% center / cover;
content: '';
opacity: 0.1;
}

#summary h2:has(+ ul > li.active) {
color: #ff7f7f !important;
transition: color 0.3s;
}

#summary a {
background-color: transparent !important;
transition: color 0.3s;
}

#summary .active a {
color: #ffff7f !important;
}

#summary a:hover {
color: #00ff7f !important;
}

summary,
.heading-span {
user-select: none;
}

.ui-toc-label {
border-color: #52525b !important;
background-color: #303036 !important;
color: #a1a1aa !important;
}

.ui-summary-search {
background-color: transparent !important;
}

.markdown-body :is(h1, h2) {
border-bottom: 1px solid #5c5c5c !important;
}

.markdown-body > h1 {
color: #ffff7f;
}

.markdown-body > h2 {
color: #ffbf7f;
}

.markdown-body > :is(h3, h4) {
color: #00ff7f;
}

.markdown-body .alert {
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: #00ff7fbf transparent;
text-wrap: nowrap;
}

.markdown-body .alert :is(h1, h2, h3, h4, h5, h6) {
color: inherit;
}

.markdown-body .alert li::marker {
color: #ff4500 !important;
}

.markdown-body .markdown-alert-important p:not(.markdown-alert-title) {
color: #a0a0a0 !important;
}

.markdown-body .code-block-wrapper:hover {
outline: none;
}

.markdown-body .code-block-wrapper .code-toolbar {
--tw-translate-y: -110%;
}

@keyframes spirit {
0%,
100% {
transform: translate(0) scale(1) rotateX(0) rotateY(0) rotateZ(0);
}
30% {
filter: drop-shadow(0.125rem 0.125rem 0.25rem #ff4500);
transform: translate(0.5rem) scale(1.05) rotateX(10deg) rotateY(-15deg) rotateZ(-10deg);
}
50% {
transform: translate(1rem) scale(0.95) rotateX(15deg) rotateY(0deg) rotateZ(-5deg);
}
70% {
transform: translate(0.5rem) scale(0.92) rotateX(10deg) rotateY(15deg) rotateZ(5deg);
}
}

#spirit {
position: fixed;
right: -0.25rem;
bottom: -1rem;
z-index: 100;
width: min(20%, 275px) !important;
pointer-events: none;
transform-origin: bottom;
animation: spirit 1.5s linear infinite;
}
</style>

<img src="https://hackmd.io/_uploads/By9FDX04Je.png" alt="spirit" id="spirit">