---
title: dark theme
description: a dark theme for the entire note page
tags: theme, hackhackmd, colors, dark
---

<style>
/*
* Variables
* color schemes generated using:
* https://material.io/resources/color
*
*/
:root {
--color-primary: #004d40;
--color-primary-dark: rgb(28, 28, 30);
--color-primary-darker: #111;
--color-primary-light: #39796b;
--color-secondary: #00838f;
--color-secondary-dark: #005662;
--color-secondary-light: #4fb3bf;
--color-accent: #9d76ff;

--border-color: #080808;
--text-color-light: #8effff;
--text-color-bright: #ffffff;
--text-color-dark: #333;
}

/* font color styles */
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(80 80 80 aliceblue/ var(--tw-text-opacity));
}

/*
* entire document
*/
body {
background-color: var(--color-primary-dark) !important;

/* text */
color: var(--text-color-light);
font-family: "Helvetica Neue", Roboto, "Source Sans Pro", Helvetica, Arial, sans-serif !important;
font-size: 1.2em !important;
}

/* remove light background from buttons*/
.btn-default {
background-color: transparent !important;
border-color: transparent !important;
}
.community-button:hover,
.community-button:focus {
background-color: transparent;
}
.community-button:hover,
.btn-default:hover {
color: #EEE !important;
}

/* remove the light background from the comments window */
.open-comments {
background-color: transparent !important;
}

/*
* books
*/
.summary,
.summary .toolbar {
background-color: #111;
}

.summary .toolbar {
border-color: var(--border-color);
}

.summary .toolbar input {
color: var(--text-color-dark);
background-color: transparent;
border: none;
border-bottom: 1px solid var(--color-primary);
}
.summary .toolbar input:focus {
color: var(--text-color-light);
outline: none !important;
box-shadow: none !important;
}

#summary h1,
#summary h2 {
color: var(--color-secondary-light);
}

/* border between sections */
#summary h2 {
border-color: var(--border-color);
}

#summary li a {
color: var(--text-color-light);
font-weight: bold;
text-decoration: none !important;
}
#summary li a:hover {
color: #FFF !important;
text-decoration: none !important;
}

/* notes can follow links, so pad them */
#summary li > em {
display: inline-block;
padding: 0 15px 10px 15px;
}

/*
* note styles
*/

/* light octicon */
.markdown-body .octicon-link {
color: #FFF !important;
}

/* document font stuffs */
.markdown-body {
font-size: 1.5em;
font-weight: 300;
/* the earlier body declaration seems to sometimes get ignored for its lack of specificity, so we specificify again */
font-family: "Helvetica Neue", Roboto, "Source Sans Pro", Helvetica, Arial, sans-serif !important;
}
.markdown-body strong {
font-weight: 500;
}
.markdown-body a {
font-weight: 500 !important;
color: var(--color-accent);
-webkit-transition: color 300ms ease;
-moz-transition: color 300ms ease;
-ms-transition: color 300ms ease;
-o-transition: color 300ms ease;
transition: color 300ms ease;
}
.markdown-body a:hover {
color: rgba(255, 255, 255, 1);
text-decoration: none;
}

.markdown-body mark {
background-color: var(--color-secondary-light);
color: #000;
border-radius: 0.25em;
}

/* word definitions */
.markdown-body dl {
padding-left: 1em;
}
.markdown-body dl dd {
padding: 0;
margin: 0;
margin-left: 0.5em;
padding-left: 0.5em;
display: list-item;
list-style-type: ': ';
}
.markdown-body dd::marker {
font-weight: bold;
}

/*
* spoilers
*/
.markdown-body details {
margin-bottom: 1em;
margin-left: 1em;
position: relative;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
transition-property: padding-left;
}
.markdown-body details[open] {
border: 1px solid var(--border-color);
margin-bottom: 2.75em;
padding: 1em;
top: 0.75em;
background-color: rgba(0, 0, 0, 0.2);
}
.markdown-body details[open] summary {
font-weight: 500;
color: #FFF;
position: absolute;
/* */
top: -0.75em;
/* same as page bg */
background: var(--color-primary-dark);
}
/* animation */
.markdown-body details[open] summary ~ * {
animation: sweep 300ms ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-left: -10px}
100% {opacity: 1; margin-left: 0px}
}

/* icons */
.markdown-body i.fa {
color: var(--text-color-light);
}

/*
* inverted blocks
*/
.markdown-body pre {
filter: invert(1);
background-color: #EDEDED;
border: none !important;
/* make sure it's the same width */
/* and spacing as surrounding text */
width: calc(100% - 32px);
position: relative;
left: 16px;
}
.markdown-body .gist {
filter: invert(1);
}
#ui-toc-affix {
filter: invert(1);
}

/* TOC: Table of Contents */
.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; */
background-color: none;
}

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

/* nav bar */
.navbar.navbar-default {
border: none;
}
.navbar > .navbar-collapse {
background-color: var(--color-primary-darker);
}
.navbar-nav a.navbar-button-icon:hover {
color: white !important;
background-color: transparent !important;
}
.navbar-nav i.fa {
color: inherit;
}
.dropdown-menu {
background-color: var(--color-primary-dark);
color: var(--color-primary-light) !important;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a {
background-color: var(--color-primary-dark);
text-decoration: none;
color: var(--text-color-light);
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
color: var(--color-primary-dark);
text-decoration: none;
background-color: var(--text-color-light);
}

/* toolbar */
.tool-bar > a.fa {
color: var(--color-primary-light) !important;
border: none;
}
.tool-bar > a.fa:hover {
color: var(--text-color-bright) !important;
}

/* owner */
.ui-infobar__user-info > ul > li > div > .flex > span {
color: var(--text-color-light) !important;
}

/* code tokens */
.markdown-body .code .token {
background: transparent !important;
}

.markdown-body code,
.markdown-body tt {
background-color: rgba(255, 255, 255, .06);
}

code {
padding: 0.05em 0.5em !important;
margin: 0 0.5em !important;
}

/* gists */
.markdown-body .gist-data {
background-color: rgba(255, 255, 255, .6);
}
.markdown-body .gist-data .js-file-line-container {
background-color: transparent;
}

/*
* headers
*/
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
font-weight: 500;
text-align: left;
border: none;
}

.markdown-body h1,
.markdown-body h2 {
color: var(--color-secondary-light);
}
.markdown-body h2 {
border-bottom: 1px solid var(--color-secondary);
}

.markdown-body h1 {
font-size: 1.7em;
text-align: center;
}
.markdown-body h2 {
font-size: 1.5em;
}
.markdown-body h3 {
font-size: 1.4em;
}
.markdown-body h4 {
font-size: 1.3em;
}
.markdown-body h5 {
font-size: 1.2em;
}
.markdown-body h6 {
font-size: 0.8em;
}

.markdown-body hr {
background-color: var(--color-secondary);
margin: 1.25em 0;
height: 1.1px;
}

/*
* blockquotes
*/
.markdown-body blockquote,
.markdown-body blockquote blockquote {
border-left-color: var(--color-secondary);
color: #999;
padding: 0 !important;
/* TODO
* figure out how to properly
* align blockquotes
*/
padding-right: 5em !important;
}
.markdown-body blockquote:before {
color: var(--color-secondary);
}
.markdown-body blockquote small,
.markdown-body blockquote i.fa {
color: var(--color-accent);
opacity: 0.8;
}

/*
* tables
*/
.markdown-body table {
display: table;
padding: 1em;
margin-left: 1em;
width: calc(100% - 2em);
}
.markdown-body table th,
.markdown-body table td,
.markdown-body table tr {
border: none !important;
}

.markdown-body table tr {
background-color: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/*
* diagrams
*/
.markdown-body .sequence-diagram rect[stroke="none"] {
/*
fill: var(--color-primary-dark);
*/
fill: black;
opacity: 0.2;
filter: invert(1);
}
.markdown-body .graphviz polygon {
fill: transparent;
}

.markdown-body .vega svg {
background-color: transparent !important;
}

.markdown-body .fretboard .svg_wrapper {
background-color: transparent;
}

/*
* alerts
*/
.markdown-body .alert {
color: #FFF;
position: relative;
z-index: 1;
padding: 0;
border: none;
font-weight: 500;
}
.markdown-body p {
padding: 0 1em;
}
.markdown-body .alert-success:before,
.markdown-body .alert-info:before,
.markdown-body .alert-warning:before,
.markdown-body .alert-danger:before {
content: ' ';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
/* give each alert a translucent background so that the variable theme colors can shine through a bit */
.markdown-body .alert-success:before {
background-color: rgba(0, 255, 0, 0.4);
}
.markdown-body .alert-info:before {
background-color: rgba(0, 0, 255, 0.4);
}
.markdown-body .alert-warning:before {
background-color: rgba(255, 255, 0, 0.5);
}
.markdown-body .alert-danger:before {
background-color: rgba(255, 0, 0, 0.4);
}
.markdown-body .alert-success,
.markdown-body .alert-info,
.markdown-body .alert-warning,
.markdown-body .alert-danger {
background-color: var(--color-secondary);
}

/*
* Images
*/
/* i don't even know why background colors on images is even a thing, but let's git rid of it */
.markdown-body img {
background-color: transparent;
}

/* center gifs */
.markdown-body img[src$=gif] {
position: relative;
transform: translateX(-50%);
left: 50%;
}

/* footnotes */
.markdown-body .footnotes {
padding: 0;
font-size: 0.8em;
}
.markdown-body .footnotes ol li {
counter-increment: OrderedList;
}
.markdown-body .footnotes ol li::marker {
content: "[" counter(OrderedList) "] ";
}
.markdown-body .footnotes p {
margin: 0.3em;
}
</style>