From 77fa67db9288c9b11680a97682b9ea8cff5567fe Mon Sep 17 00:00:00 2001
From: Marcel Kapfer <opensource@mmk2410.org>
Date: Wed, 23 Sep 2020 21:19:33 +0200
Subject: [PATCH] Provide dark color scheme

---
 assets/css/main.scss | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/assets/css/main.scss b/assets/css/main.scss
index a516d55..5b32a07 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -12,11 +12,17 @@
  ***************/
 
 $c-bg: #fafafa;
+$c-bg-inv: #333;
 $c-bg-main: #fff;
+$c-bg-main-inv: #222;
 $c-primary: #4d3c9b;
+$c-primary-inv: #755bf0;
 $c-bg-category: #4d3c9b;
+$c-bg-category-inv: #755bf0;
 $c-bg-tag: #8171c8;
+$c-bg-tag-inv: #4d3c9b;
 $c-font: #333;
+$c-font-inv: #fafafa;
 $c-nav-font: #f4f4f4;
 $c-btn-font: $c-nav-font;
 $c-btn-bg: $c-bg-category;
@@ -33,6 +39,11 @@ body {
     color: $c-font;
     font-family: "Raleway", sans-serif;
     line-height: 1.5;
+
+    @media (prefers-color-scheme: dark) {
+	background-color: $c-bg-inv;
+	color: $c-font-inv;
+    }
 }
 
 body > header {
@@ -130,6 +141,11 @@ main {
     max-width: 1000px;
     padding: 40px;
 
+    @media (prefers-color-scheme: dark) {
+	background-color: $c-bg-main-inv;
+	box-shadow: none;
+    }
+
     article {
 	margin: 40px 0;
     }
@@ -141,6 +157,10 @@ main {
 	text-decoration: underline;
 	text-decoration-color: $c-primary;
 	text-decoration-thickness: 4px;
+
+	@media (prefers-color-scheme: dark) {
+	    text-decoration-color: $c-primary-inv;
+	}
     }
 
     h2 {
@@ -152,6 +172,11 @@ main {
 	    color: $c-font;
 	    text-decoration-color: $c-primary;
 
+	    @media (prefers-color-scheme: dark) {
+		color: $c-font-inv;
+		text-decoration-color: $c-primary-inv;
+	    }
+
 	    &:hover {
 		text-decoration: none;
 	    }
@@ -170,6 +195,10 @@ main {
 	color: $c-primary;
 	text-decoration: none;
 
+	@media (prefers-color-scheme: dark) {
+	    color: $c-primary-inv;
+	}
+
 	&:hover {
 	    text-decoration: underline;
 	}
@@ -222,10 +251,18 @@ main {
 
     #tags > a {
 	background: $c-bg-tag;
+
+	@media (prefers-color-scheme: dark) {
+	    background: $c-bg-tag-inv;
+	}
     }
 
     #categories > a {
 	background: $c-bg-category;
+
+	@media (prefers-color-scheme: dark) {
+	    background: $c-bg-category-inv;
+	}
     }
 
     @media screen and (max-width: 1000px) {