blog/public/css/themes/dark.css

@import url("dark-chroma.css");

a {
	color: #A1A1EA;
}

.highlight > * {
	border-color: #505050;
}

:not(pre) > code {
	/* inline code elements */
	background-color: rgba(90, 90, 90, 0.25);
}

a > code {
	background-color: rgba(65, 65, 170, 0.3);
}

.section-list li > * {
	background-color: rgba(90, 90, 90, 0.25);
}

.section-list li > a {
	background-color: rgba(65, 65, 170, 0.3);
}

body {
	color: rgb(210, 210, 210);
	background-color: rgb(27, 27, 27);
}

blockquote {
	color: rgb(170, 170, 170);
	border-left: 0.25em solid #444;
}

img.color-adapting-image,
figure.color-adapting-image img {
	filter: invert(85%) hue-rotate(180deg);
	/* hue rotate trick from: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a */
}

.header {
	background-color: rgb(40, 40, 40); /* still want a background color before the image loads */
	background-image: url(../../images/header-bg-dark.jpg);
}

.main {
	background-color: rgb(14, 14, 14);
	box-shadow: none;
}

.footer {
	color: rgb(160, 160, 160);
}

.title-header-date {
	color: rgb(150, 150, 150);
}

.title-list-date {
	color: rgb(150, 150, 150);
}

.table-of-contents {
	border-color: #505050;
	background-color: #1A1A1A;
}

.notice {
	border-width: 2px;
	border-style: solid;
	border-top: 0;
}

.notice .notice-title .notice-title-icon {
	filter: invert(80%);
}

.notice.note {
	background-color: #001320;
	border-color: #00487B;
}

.notice.note .notice-title {
	background-color: #00487B;
}

.notice.tip {
	background-color: #132000;
	border-color: #105600;
}

.notice.tip .notice-title {
	background-color: #105600;
}

.notice.warning {
	background-color: #200000;
	border-color: #700000;
}

.notice.warning .notice-title {
	background-color: #700000;
}

@media only screen and (max-width: 400pt) {
	.links {
		background-color: rgb(30, 30, 30);
	}
}