Move to custom dark mode

themes/theme/templates/style.css

@@ -5,20 +5,15 @@ html {
 body {
 	text-rendering: optimizeLegibility;
 	font: 1.2rem/1.0 Lato,sans-serif;
-	background-color: rgb(245, 245, 245);
-	background-color: white;
 }
 
 a {
-	color: #000000;
 	text-decoration: none;
 	outline: none;
-	border-bottom: 1px solid #000;
 }
 
 pre {
 	font-size: 1rem;
-	background-color: #eee;
 	padding: 1rem;
 }
 
@@ -27,6 +22,12 @@ pre {
 	margin: 2rem auto 0 auto;
 }
 
+.theme-select {
+	font-size: 1rem;
+	margin-bottom: 0;
+	cursor: pointer;
+}
+
 .sidebar {
 	margin-top: 2px;
 	float: left;
@@ -63,7 +64,7 @@ pre {
 
 .topbar .me {
 	float: left;
-	height: 6rem;
+	height: 6.5rem;
 	width: auto;
 }
 
@@ -74,7 +75,6 @@ pre {
 }
 
 .topbar .contact-icons {
-	margin-top: 1.5rem;
 	margin-left: 0.25rem;
 	margin-bottom: 0;
 }
@@ -89,9 +89,12 @@ pre {
 	margin-right: 1rem;
 }
 
+.topbar .theme-select {
+	margin-top: 0.5rem;
+}
+
 .toc {
 	float: right;
-	background-color: #eee;
 	padding: 0.75rem;
 	padding-top: 0;
 	margin-left: 0.75rem;
@@ -107,7 +110,6 @@ pre {
 }
 
 .content p.metadata {
-	color: #555;
 	font: 1rem/1.0 Apparatus SIL,serif;
 	font-style: italic;
 }
@@ -164,24 +166,118 @@ pre {
 	}
 }
 
-.darkmode-toggle {
-	z-index: 500;
-	background: black !important;
+
+
+body {
+	background-color: #fff;
+	color: #000;
 }
 
-.darkmode-toggle--white {
-	z-index: 500;
-	background: grey !important;
+a {
+	color: #000;
+	border-bottom: 1px solid #000;
 }
 
-.darkmode--activated .content img {
+pre {
+	background-color: #eee;
+}
+
+.toc {
+	background-color: #eee;
+}
+
+.content p.metadata {
+	color: #555;
+}
+
+body.dark {
+	background-color: #000;
+	color: #fff;
+}
+
+body.dark a {
+	color: #fff;
+	border-bottom: 1px solid #fff;
+}
+
+body.dark pre {
+	background-color: #222;
+}
+
+body.dark .toc {
+	background-color: #222;
+}
+
+body.dark .content p.metadata {
+	color: #aaa;
+}
+
+body.dark .content img {
 	filter: brightness(75%);
 }
 
-.darkmode--activated video {
-	mix-blend-mode: difference;
-}
-
-.darkmode--activated .contact-icons img {
+body.dark .contact-icons img {
 	filter: invert(1);
 }
+
+@media (prefers-color-scheme: dark) {
+	body.light {
+		background-color: #fff;
+		color: #000;
+	}
+
+	body.light a {
+		color: #000;
+		border-bottom: 1px solid #000;
+	}
+
+	body.light pre {
+		background-color: #eee;
+	}
+
+	body.light .toc {
+		background-color: #eee;
+	}
+
+	body.light .content p.metadata {
+		color: #555;
+	}
+
+	body.light .contact-icons img {
+		filter: none;
+	}
+
+	body.light .content img {
+		filter: none;
+	}
+
+	body {
+		background-color: #000;
+		color: #fff;
+	}
+
+	a {
+		color: #fff;
+		border-bottom: 1px solid #fff;
+	}
+
+	pre {
+		background-color: #222;
+	}
+
+	.toc {
+		background-color: #222;
+	}
+
+	.content p.metadata {
+		color: #aaa;
+	}
+
+	.content img {
+		filter: brightness(75%);
+	}
+
+	.contact-icons img {
+		filter: invert(1);
+	}
+}