From 1fb80d06747cf8e3158d1ae47add48b8de85b74a Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Mon, 3 Aug 2020 19:23:20 +0200
Subject: [PATCH] add dark theme

---
 style/shiny/base.css    | 40 ++++++++++++++++++++++++++++++++++++++--
 style/shiny/gallery.css |  4 ++--
 style/shiny/single.css  |  2 +-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/style/shiny/base.css b/style/shiny/base.css
index 6e2fe23..1206d04 100644
--- a/style/shiny/base.css
+++ b/style/shiny/base.css
@@ -17,6 +17,7 @@
   background: var(--gradient) fixed;
   margin: 1em;
 
+  --text-col: white;
   --nsfw-sticker-rotate: 15deg;
 }
 
@@ -30,9 +31,10 @@ h2 { font-size: 125%; }
 
 body {
   --shadow: hsl(42deg, 82%, 90%, 75%);
+  --border-col: var(--text-col);
 
   background: hsla(0, 0%, 0%, 60%);
-  border: 3px solid white;
+  border: 3px solid var(--border-col);
   box-shadow: 0 0 3em var(--shadow);
   position: relative;
 
@@ -40,7 +42,7 @@ body {
   margin: 2em auto 3.5em;
   border-radius: 1.5em;
 
-  color: white;
+  color: var(--text-col);
   --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
   text-shadow: var(--text-shadow);
 }
@@ -77,3 +79,37 @@ footer {
   text-align: baseline;
   height: 1em;
 }
+
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --gradient:
+      linear-gradient(135deg,
+          hsl(42deg,  27%, 25%),
+          hsl(348deg, 27%, 25%),
+          hsl(334deg, 32%, 25%),
+          hsl(234deg, 57%, 23%),
+          hsl(195deg, 27%, 20%),
+          hsl(155deg, 22%, 20%)
+        );
+    --text-col: hsl(55deg, 60%, 90%);
+  }
+
+  @media (prefers-contrast: high) {
+    :root {
+      --text-col: white;
+      background: black;
+    }
+
+    body {
+      border: unset;
+      box-shadow: unset;
+      background: unset;
+    }
+  }
+
+  body {
+    --shadow: hsl(42deg, 82%, 90%, 20%);
+    --border-col: black;
+  }
+}
diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css
index 82e8bd1..5c0a176 100644
--- a/style/shiny/gallery.css
+++ b/style/shiny/gallery.css
@@ -32,7 +32,7 @@ body {
 
 .item:not(.year-marker) {
   box-shadow: var(--text-shadow);
-  border: var(--border-thickness) solid white;
+  border: var(--border-thickness) solid var(--text-col);
   border-radius: 0.5em;
   background: hsl(340, 45%, 65%);
 }
@@ -48,7 +48,7 @@ figcaption {
   bottom: -1px;
   left: -1px;
   width: 100%;
-  border: 1px solid white;
+  border: 1px solid var(--text-col);
   display: block;
   text-align: center;
   background: hsl(0, 0%, 0%, 75%);
diff --git a/style/shiny/single.css b/style/shiny/single.css
index 111cead..c04cd33 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -13,7 +13,7 @@ body {
   width: min-content;
   position: relative;
   overflow: hidden;
-  border: 2px solid white;
+  border: 2px solid var(--text-col);
   border-radius: 1em;
   box-shadow: var(--text-shadow);
   background: hsl(340, 45%, 65%);