---
title: Importable Dark Theme (CSS) 2.0
description: Dark... Good...
---

<!--
{%hackmd @cimeesia/SJv5Zgj1yl %}
{%hackmd @cimeesia/SJv5Zgj1yl %}
{%hackmd @cimeesia/SJv5Zgj1yl %}
{%hackmd @cimeesia/SJv5Zgj1yl %}
{%hackmd @cimeesia/SJv5Zgj1yl %}
{%hackmd @cimeesia/SJv5Zgj1yl %}
-->

<!----------------------------------------------------------

This is an importable dark theme made by me, sia, a big fan
of HackMD. Feel free to import this note/theme/CSS by adding
that code you seen above into your notes. You'll only have
to follow Creative Commons BY-SA.

[Sia's Dark Theme](https://hackmd.io/d2bXxJR_QdOpTc6A_Vbz9g)

By the way, thanks for @hackmd who made a good good guidance
that taught me how to import a Note from another Note.
[HackMD's Guide](https://hackmd.io/@docs/insert-external-media-en).

---------------------------------------------------------->

<!-- Mastodon verification -->

<a rel="me" href="https://o3o.ca/@cimeesia"></a>

<!-- <meta name="fediverse:creator" content="@[e-mail]"> -->

<!-- Reset CSS -->
<style>
: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 {
background-color: unset;
color: unset;
}
</style>

<!-- My custom CSS -->
<style>
*::selection{
background: rgba(88, 237, 217, 0.3) !important;
}
</style>

<!-- HackMD's framework -->
<style>
/* Colors */
body {
/* HackMD's Framework */
--text-primary: #80986a;
--text-primary-dark: #617a40;
--bg-color: #f6f4f1;

--bg-gray: #efedea;
--bg-gray-dark: #ebe9e4;

--bg-lighter-blue: #dfe5eb;
--border-blue: #7095d8;

--bg-light-yellow: #f0e7cf;
--text-yellow: #dba614;

--bg-light-red: #f1dddd;
--text-red: #d07070;

/* My CSS */
--sia-bgc-main: #444;
--sia-bgc-invisible: rgba(0, 0, 0, 0);

--sia-bgc-code: rgba( 33, 33, 33, 0.1) !important;
--sia-bgc-success: rgba( 64, 242, 112, 0.1) !important;
--sia-bgc-info: rgba( 64, 201, 242, 0.1) !important;
--sia-bgc-warning: rgba(242, 221, 64, 0.1) !important;
--sia-bgc-danger: rgba(242, 64, 142, 0.1) !important;

--sia-bgc-mark: rgba( 0, 0, 0, 0) !important;

--sia-txt-main: #FFF4F6 !important;
--sia-txt-success: #D4F3DA !important;
--sia-txt-info: #D4E7F3 !important;
--sia-txt-warning: #F3EFD4 !important;
--sia-txt-danger: #F3D7D4 !important;

--sia-txt-mark: #F59E0B !important;

--sia-txt-a: #F34AAF;
}

/* Docs background color */
#meta-title-tags {
background-color: none;
}

/* .text-text-emphasize */
.text-icon-emphasize,
.text-text-emphasize{
color: var(--sia-txt-main);
}
/* Whole site */
body, .ui-content,
#doc.markdown-body,
.ui-view-area,
.ui-comment-app .open-comments,
#meta-title-tags,
#meta-title-tags > .w-full {
color: var(--sia-txt-main) !important;
background-color: var(--sia-bgc-main) !important;
}

/* Anchor */
.markdown-body ::marker{
color: var(--sia-txt-main) !important;
}
/* Image */
.markdown-body img, .markdown-body iframe {
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 0.5rem 0rem;
border-radius: 0.6rem;
/* My setup */
background: transparent;
}

.markdown-body img.emoji {
border: none;
width: 20px;
height: 20px;
vertical-align: middle;
}

/* iframe */
.markdown-body ifame,
.markdown-body embed {
max-width: 100%;
width: 728px;
border-radius: 0.6rem;
overflow: hidden;
}

/* Spoiler */
.markdown-body details {
background-color: var(--sia-bgc-invisible) !important;
color: var(--sia-txt-main) !important;
/* padding: 0.5rem 1rem; */
/* margin-bottom: 0.5rem; */
/* border-radius: 3px; */
border-color: var(--sia-bgc-invisible);
}
.markdown-body details:hover {
background-color: var(--sia-bgc-invisible);
transition: .1s all;
}
.markdown-body details[open]:hover {
background-color: var(--sia-bgc-invisible);
}
.markdown-body details summary {
background-color: var(--sia-bgc-invisible);
cursor: pointer;
}
.markdown-body details summary + p {
background-color: var(--sia-bgc-invisible);
margin-top: 0.5rem;
}
.markdown-body details code {
background-color: var(--sia-bgc-code);
}
.markdown-body details p:last-child {
margin-bottom: 0px;
}

/* Alert */
:root .markdown-body div.alert {
border: none;
border-radius: 0.5rem;
background-color: var(--sia-bgc-invisible) !important;
}

.markdown-body div.alert h2,
.markdown-body div.alert h3,
.markdown-body div.alert h4,
.markdown-body div.alert h5,
.markdown-body div.alert h6 {
margin-top: 0px;
}

/* info block */
:root .markdown-body div.alert.alert-info {
background-color: var(--sia-bgc-info) !important;
color: var(--sia-txt-info) !important;
border-left: var(--sia-txt-info) 3px solid;
}

/* warning block */
:root .markdown-body div.alert.alert-warning {
background-color: var(--sia-bgc-warning) !important;
color: var(--sia-txt-warning) !important;
border-left: var(--sia-txt-warning) 3px solid;
}

/* success block */
:root .markdown-body div.alert.alert-success {
background-color: var(--sia-bgc-success) !important;
color: var(--sia-txt-success) !important;
border-left: var(--sia-txt-success) 3px solid;
}

/* danger block */
:root .markdown-body div.alert.alert-danger {
background-color: var(--sia-bgc-danger) !important;
color: var(--sia-txt-danger) !important;
border-left: var(--sia-txt-danger) 3px solid;
}

/* Date and comment */
:root .markdown-body li small,
:root .markdown-body blockquote,
:root .markdown-body blockquote .small,
:root .markdown-body blockquote small {
font-size: 85%;
/* My setup */
color: var(--sia-txt-info) !important;
margin: 6px auto 3px auto !important;
}

/* ==Highlight== */
:root .markdown-body .mark,
:root .markdown-body mark {
color: var(--sia-txt-mark) !important;
background-color: var(sia-bgc-mark) !important;
border-radius: 3px;
}

/* code block */
:root .markdown-body p>code,
:root .markdown-body p:has(>code),
:root .markdown-body pre>code,
:root .markdown-body pre:has(code){
color: var(--sia-txt-main) !important;
}
.markdown-body tt,
.markdown-body:not(.next-editor) pre:has(>code) {
background-color: var(--sia-bgc-code) !important;
border-radius: 0.6rem;
overflow: hidden;
/* My setup */
color: var(--sia-txt-main) !important;
}
:root[theme] [theme="light"] .markdown-body details code,
:root .markdown-body details code{
background-color: var(--sia-bgc-code) !important;
}

span[class^="hljs"][class*="comment"]{ color: #6d7a72 !important; }
span[class^="hljs"][class*="constant"]{ color: #eba4ac !important; }
span[class^="hljs"][class*="function"]{ color: #ffc85b !important; }
span[class^="hljs"][class*="keyword"]{ color: #dcbff2 !important; }
span[class^="hljs"][class*="number"]{ color: #ff38a2 !important; }
span[class^="hljs"][class*="parameter"]{ color: #9cd162 !important; }
span[class^="hljs"][class*="punctuation"]{ color: #d971d3 !important; }
span[class^="hljs"][class*="string"]{ color: #fae8b6 !important; }
span[class^="hljs"][class*="string-property"]{ color: #fae8b6 !important; }
span[class^="hljs"][class*="property"]{ color: unset !important; }
span[class^="hljs"][class*="literal-property"]{ color: #cccccc !important; }
span[class^="hljs"][class*="operator"]{ color: #cccccc !important; background: unset !important; }

/* Hyperlink */
.markdown-body a,
.markdown-body a:hover,
.markdown-body a:focus {
color: var(--sia-txt-a) !important;
text-decoration-color: var(--sia-txt-a) !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 4px !important;
}

/* Table (All are my setup) */
.markdown-body table,
.markdown-body table tr,
.markdown-body table th,
.markdown-body table td{
border: solid 1px #aaa !important;
background: unset !important; }
.markdown-body table tr:hover{
background: var(--sia-bgc-info) !important; }

/* hr */
.markdown-body hr {
height: 3px;
background-color: var(--sia-bgc-main);
border-radius: 10rem;
overflow: hidden;
}

/* Headline (All are my setup) */
.markdown-body h1{ font-size: 36px; color: hsla(344, 73%, 88%, 0.9) !important; letter-spacing: 3px; }
.markdown-body h2{ font-size: 30px; color: hsla(344, 73%, 80%, 0.9) !important; letter-spacing: 2px; }
.markdown-body h3{ font-size: 25px; color: hsla(344, 73%, 72%, 0.9) !important; letter-spacing: 1px; }
.markdown-body h4{ font-size: 21px; color: hsla(344, 73%, 64%, 0.9) !important; }
.markdown-body h5{ font-size: 18px; color: hsla(344, 73%, 56%, 0.9) !important; }
.markdown-body h6{ font-size: 16px; color: hsla(344, 73%, 48%, 0.9) !important; }
.markdown-body h6>code{ color: var(--sia-txt-main) !important;}
/* Note Recommendations */
#notes-recommendations{
display: none !important;
}

/* LaTex CSS */
mjx-mtable {
border-collapse: separate !important;
border-spacing: 12px !important;
}
mjx-mtr{
margin-top: 1em !important;
}
mjx-nstrut[type="d"]{
vertical-align: unset !important;
}
mjx-line[type="d"]{
margin: 0 -0.7em !important;
}
mjx-c[class]::before {
padding: 0 0.5em 0 0 !important;
}

</style>