From 05980eeb3f27f94db6f62efd1025c6830e114db6 Mon Sep 17 00:00:00 2001
From: wgroeneveld <wouter@brainbaking.com>
Date: Wed, 19 Jan 2022 11:33:39 +0100
Subject: [PATCH] add prefers-color-scheme dark

---
 .../assets/sass/_brainbaking-dark.sass        | 80 +++++++++++++++++++
 .../brainbaking-minimal/assets/sass/main.sass |  1 +
 .../layouts/partials/head-meta.html           |  1 +
 .../layouts/partials/icons.html               |  2 +-
 4 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 themes/brainbaking-minimal/assets/sass/_brainbaking-dark.sass

diff --git a/themes/brainbaking-minimal/assets/sass/_brainbaking-dark.sass b/themes/brainbaking-minimal/assets/sass/_brainbaking-dark.sass
new file mode 100644
index 00000000..c69938d3
--- /dev/null
+++ b/themes/brainbaking-minimal/assets/sass/_brainbaking-dark.sass
@@ -0,0 +1,80 @@
+$dark-accent: lightgreen
+$dark-bg: #1f1f1f
+$dark-bg-alt: #272822
+$dark-nav: darken($dark-bg, 5%)
+$dark-fg: #dddddd
+
+\:root
+	color-scheme: light dark
+
+@media (prefers-color-scheme: dark)
+	body, .toot
+		background-color: $dark-bg
+		color: $dark-fg
+
+	body > footer
+		background-color: $dark-nav
+
+	.search-form
+		input
+			background-color: $dark-bg-alt
+			border: 1px solid grey
+		button[type="submit"]
+			background-color: $dark-bg-alt
+			color: $dark-accent
+
+			&:hover
+				background-color: var(--accent)
+
+
+	a, a:visited, .link
+		color: $dark-accent
+	a:hover, a:visited:hover, .link:hover
+		color: $dark-fg
+
+	h1, h2, h3
+		color: $dark-accent
+
+	.intro
+		h1
+			text-shadow: black 0px 0px 10px
+
+	kbd
+		color: $dark-accent
+		border: 1px solid $dark-accent
+
+	code, pre
+		background-color: $dark-bg-alt
+		color: lightgrey
+
+	div.list h3
+		color: darken($dark-fg, 20%)
+
+	figure
+		img
+			filter: brightness(.8) contrast(1.2)
+		figcaption
+			color: darken($dark-fg, 20%)
+
+	.highlight
+		pre
+			background-color: $dark-bg-alt !important
+			color: $dark-fg !important
+
+	hr
+		border-top: 1px solid darken($dark-fg, 20%)
+
+	header
+		h1
+			color: $dark-accent
+
+	article a, article .link
+		color: $dark-accent
+		border-bottom: 1px solid $dark-accent
+
+	.belowsingle
+		background-color: $dark-bg-alt
+		border-bottom: 5px solid $dark-bg
+
+	nav,
+		background-color: $dark-nav
\ No newline at end of file
diff --git a/themes/brainbaking-minimal/assets/sass/main.sass b/themes/brainbaking-minimal/assets/sass/main.sass
index 564472d9..f338a5a0 100644
--- a/themes/brainbaking-minimal/assets/sass/main.sass
+++ b/themes/brainbaking-minimal/assets/sass/main.sass
@@ -22,3 +22,4 @@ $belowsingle: rgba(243, 243, 243, 0.8)
 @import 'goodreads'
 @import 'forms'
 @import 'toot'
+@import 'brainbaking-dark'
diff --git a/themes/brainbaking-minimal/layouts/partials/head-meta.html b/themes/brainbaking-minimal/layouts/partials/head-meta.html
index f002e2c5..ca96e489 100644
--- a/themes/brainbaking-minimal/layouts/partials/head-meta.html
+++ b/themes/brainbaking-minimal/layouts/partials/head-meta.html
@@ -3,6 +3,7 @@
 {{ $logo := "img/avatar-icon.png" }}
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
 <link rel="canonical" href="{{ $perm }}">
 <link rel="me" title="Mastodon" href="{{ .Site.Author.mastodonlink }}" />
 <link rel="me" title="Github" href="{{ .Site.Author.githublink }}" />
diff --git a/themes/brainbaking-minimal/layouts/partials/icons.html b/themes/brainbaking-minimal/layouts/partials/icons.html
index 5d5b80f4..59e6eec7 100644
--- a/themes/brainbaking-minimal/layouts/partials/icons.html
+++ b/themes/brainbaking-minimal/layouts/partials/icons.html
@@ -34,7 +34,7 @@
   </symbol>
   <symbol viewBox="0 0 24 24" id="mail" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
+    <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
   </symbol>
   <symbol viewBox="0 0 24 24" id="discuss" xmlns="http://www.w3.org/2000/svg">
       <path fill="currentColor" d="M15,4V11H5.17L4,12.17V4H15M16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12V3A1,1 0 0,0 16,2M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" />