Update css to allow dark mode toggle

IanWold · Sep 21, 2023 · d31803e · d31803e
1 parent 635962a
commit d31803e
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/Static/site.css b/Static/site.css
@@ -14,6 +14,10 @@ body {
 	grid-template-rows: 1fr 1fr 1fr 1fr 1fr auto;
 }
 
+body.dark {
+	background-color: #121212;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	display: block;
 }
@@ -29,6 +33,10 @@ a {
 	color: #323232;
 }
 
+.dark a {
+	color: white;
+}
+
 	a:hover {
 		color: orangered;
 	}
@@ -70,6 +78,9 @@ nav {
 			font-weight: 800;
 			color: #0A0A0A;
 		}
+		.dark nav .title a {
+			color: #f0f0f0;
+		}
 
 			nav .title a:hover {
 				color: orangered;
@@ -111,12 +122,18 @@ nav {
 	margin-right: auto;
 	color: #121212;
 }
+.dark .content {
+	color: #f0f0f0;
+}
 
 
 
 .section-gray {
 	background-color: whitesmoke;
 }
+.dark .section-gray {
+	background-color: #222222;
+}
 
 
 
@@ -273,6 +290,10 @@ header {
 		border-right: 1px solid gainsboro;
 		font-weight: 200;
 	}
+	.dark .pane a {
+		color: #9a9a9a;
+		border-color: #808080;
+	}
 
 		.pane a b {
 			font-weight: 500;
@@ -281,10 +302,16 @@ header {
 		.pane a:hover, .pane a:focus, .pane li.active > a {
 			color: black;
 		}
+		.dark .pane a:hover, .pane a:focus, .pane li.active > a {
+			color: white;
+		}
 
 	.pane li.active > a {
 		border-right: 1px solid black;
 	}
+	.dark .pane li.active > a {
+		border-right: 1px solid white;
+	}
 
 
 
@@ -345,6 +372,11 @@ header {
 			padding-right: 5px;
 		}
 
+		.dark .post p code {
+			background-color: #363636 !important;
+			border: 1px solid #424242;
+		}
+
 		.post ul {
 			list-style-type: disc;
 			list-style-position: inside;
@@ -394,6 +426,9 @@ header {
 			border: 1px solid gainsboro;
 			border-radius: 3px;
 		}
+		.dark .post p img {
+			border-color: #424242;
+		}
 
 
 
@@ -459,6 +494,9 @@ footer {
 	padding-bottom: 24px;
 	background-color: #323232;
 }
+.dark footer {
+	background-color: #121212;
+}
 
 	footer .feather {
 		width: 16px;