From 3d28ef4d19573b15be565c5d76818dcfc3cb9b9a Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 30 Oct 2022 11:34:12 -0700
Subject: [PATCH] Let the photos section adapt to light/dark mode

---
 content/photos/photos.css | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/content/photos/photos.css b/content/photos/photos.css
index a2775d6..59d7dbc 100644
--- a/content/photos/photos.css
+++ b/content/photos/photos.css
@@ -1,25 +1,20 @@
 :root {
-    --body-code-background-color: rgb(var(--dk-gray));
-    --box-shadow-color: rgba(var(--dk-gray), 0.8);
+    --date-item-background-color: rgb(var(--lt-gray));
 
-    --heading-color: rgb(var(--white));
+    --photo-params-background-color: rgb(var(--lt-gray));
+    --photo-params-container-background-color: rgb(var(--super-lt-gray));
+    --photo-params-color: rgb(var(--sub-dk-gray));
+    --photo-params-border-color: rgb(var(--super-lt-gray));
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --date-item-background-color: rgb(var(--dk-gray));
 
-    --html-color: rgb(var(--white));
-    --html-background-color: rgb(var(--black));
-
-    --photo-params-background-color: rgb(var(--dk-gray));
-    --photo-params-container-background-color: rgb(var(--sub-dk-gray));
-    --photo-params-color: rgb(var(--super-lt-gray));
-    --photo-params-border-color: rgb(var(--sub-dk-gray));
-
-    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
-
-    --separator-color: rgb(var(--dk-gray));
-
-    --twitter-icon: url(/icons/twitter-dark.svg);
-    --github-icon: url(/icons/github-dark.svg);
-    --instagram-icon: url(/icons/instagram-dark.svg);
-    --rss-icon: url(/icons/rss-dark.svg);
+        --photo-params-background-color: rgb(var(--dk-gray));
+        --photo-params-container-background-color: rgb(var(--sub-dk-gray));
+        --photo-params-color: rgb(var(--super-lt-gray));
+        --photo-params-border-color: rgb(var(--sub-dk-gray));
+    }
 }
 
 .photos.list {
@@ -50,7 +45,7 @@
 }
 
 .photos.list > div {
-    background-color: #333;
+    background-color: var(--date-item-background-color);
     border-radius: 3px;
     width: 100%;
     height: 100%;