From 6437efd5c5f8b8d9f16b5450f6e5cfcbbdfe01ab Mon Sep 17 00:00:00 2001
From: Patrick Spek <p.spek@tyil.nl>
Date: Mon, 14 Feb 2022 18:09:38 +0100
Subject: Update CSS

---
 assets/theme/main.scss | 48 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/assets/theme/main.scss b/assets/theme/main.scss
index 9cc1d1b..fd244ce 100644
--- a/assets/theme/main.scss
+++ b/assets/theme/main.scss
@@ -1,18 +1,32 @@
 // Variables
-$bodyBackgroundColor: #fefefe;
-$bodyTextColor: #454545;
-$linkColor: #07a;
-$blockBackgroundColor: #f6f6f6;
-$blockBorderColor: #d7d7d7;
 $mainWidth: 900px;
 
+// Colors
+@media (prefers-color-scheme: light) {
+	:root {
+		--bodyBackgroundColor: #d7d5d1;
+		--bodyForegroundColor: #2a2e2f;
+		--blockBackgroundColor: #c2beb9;
+		--linkForegroundColor: #07a;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--BodyBackgroundColor: #131516;
+		--BodyForegroundColor: #bcb7ae;
+		--BlockBackgroundColor: #1c1e1f;
+		--linkForegroundColor: #07a;
+	}
+}
+
 // Actual CSS
 html {
-	background-color: $bodyBackgroundColor;
+	background-color: var(--bodyBackgroundColor);
 }
 
 body {
-	color: $bodyTextColor;
+	color: var(--bodyForegroundColor);
 	font-size: 16px;
 	line-height: 1.4;
 	text-align: justify;
@@ -64,8 +78,8 @@ article {
 }
 
 section.admonition {
-	background-color: #f6f6f6;
-	border: 1px solid #d7d7d7;
+	background-color: var(--blockBackgroundColor);
+	border: 1px solid var(--bodyForegroundColor);
 	margin: .5rem auto 1.74rem auto;
 	width: 85%;
 	max-width: $mainWidth * .9;
@@ -122,7 +136,7 @@ section.admonition {
 // Navigation bar
 nav {
 	padding-bottom: 8px;
-	border-bottom: double $bodyTextColor;
+	border-bottom: double var(--bodyForegroundColor);
 	text-align: center;
 	font-family: Sans;
 
@@ -130,7 +144,7 @@ nav {
 		margin: 0 0.5em;
 		font-size: 24px;
 		text-decoration: none;
-		color: $bodyTextColor;
+		color: var(--bodyForegroundColor);
 	}
 
 	.brand-name {
@@ -138,20 +152,20 @@ nav {
 		display: block;
 		font-weight: bold;
 		font-size: 32px;
-		color: $bodyTextColor;
+		color: var(--bodyForegroundColor);
 		margin-bottom: 8px;
 	}
 }
 
 // Generic links
 a, a:visited {
-  color: $linkColor;
+	color: var(--linkForegroundColor);
 }
 
 // Syntax highlighting
 div.highlight {
-	border: 2px solid $blockBorderColor;
-	background-color: $blockBackgroundColor;
+	border: 2px solid var(--bodyForegroundColor);
+	background-color: var(--blockBackgroundColor);
 	width: 90%;
 	margin: 0 auto;
 	overflow-x: auto;
@@ -162,7 +176,7 @@ div.highlight {
 	}
 
 	.code-link {
-		border-top: 1px dotted $blockBorderColor;
+		border-top: 1px dotted var(--bodyForegroundColor);
 		padding: 3px 8px;
 		text-align: right;
 	}
@@ -186,7 +200,7 @@ pre code {
 	margin: .5rem auto;
 	border-left: double black;
 	padding: 0.5em;
-	background-color: $blockBackgroundColor;
+	background-color: var(--blockBackgroundColor);
 
 	blockquote {
 		font-style: italic;
-- 
cgit v1.1