Support dark mode (#27)

* Dark mode! * note about dark mode
aseradyn · May 2, 2024 · f561cdd · f561cdd
1 parent 506fbfb
commit f561cdd
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/pages/ephemera/2024-05-02_02.md b/pages/ephemera/2024-05-02_02.md
@@ -0,0 +1,3 @@
+It's dark mode, baby!
+
+This site now follows your browser's (or OS's) light/dark mode preference.
diff --git a/theme/base-elements.css b/theme/base-elements.css
@@ -4,6 +4,7 @@ body {
     --turquoise-values: 206, 231, 235;
     --turquoise: rgb(var(--turquoise-values));
     --turquoise-half: rgb(var(--turquoise-values), 0.5);
+    --text-backdrop: rgb(255,255,255,0.7);
     --coral: #E84855;
     --dark-red: #590925;
     --bright-red: #9F0E41;
@@ -14,15 +15,24 @@ body {
     background-image: url("/theme/images/bamboo.jpg");
 }
 
+@media (prefers-color-scheme: dark) {
+    body {
+        background-image: url("/theme/images/bamboo-dark.png");
+        --turquoise-values: 24,53,58;
+        --baseFont: white;
+        --turquoise: rgb(var(--turquoise-values));
+        --turquoise-half: rgb(var(--turquoise-values), 0.5);
+        --text-backdrop: rgb(0,0,0,0.7);
+        --dark-red: #DA1B2B;
+        --bright-red: var(--coral);
+    }
+}
+
 a {
     color: var(--bright-red);
     text-underline-position: under;
 }
 
-a:visited {
-    color: var(--dark-red);
-}
-
 a:hover {
     color: var(--orange);
 }

diff --git a/theme/containers.css b/theme/containers.css
@@ -19,7 +19,7 @@
 
 article,
 section {
-    background-color: rgb(255,255,255, 0.7);
+    background-color: var(--text-backdrop);
     border-radius: 10px;
     padding-bottom: 20px;
     overflow-wrap: anywhere;

diff --git a/theme/header.css b/theme/header.css
@@ -2,10 +2,13 @@
     display: grid;
     grid-template-rows: auto auto;
     column-gap: 30px;
-    background-color: rgb(206,231,235, 0.7);
+    background-color: var(--turquoise-half);
     padding-left: 10px;
     padding-right: 10px;
 }
+.pageHeader-background {
+    background-color: var(--text-backdrop);
+}
 .name-full {
     font-family: Merienda, Inter, sans-serif;
     justify-self: center;
@@ -62,5 +65,5 @@
 
 }
 #siteNav a:hover {
-    color: #E84855;
+    color: var(--orange);
 }
diff --git a/theme/header.php b/theme/header.php
@@ -43,7 +43,7 @@ function isCurrentPath($pathString, $onlyExact = false) {
 </head>
 
 <body>
-
+<div class="pageHeader-background">
 <header id="pageHeader">
 	<div class="name-full"><a href="/">jill.menning</a></div>
 	<nav id="siteNav">
@@ -67,5 +67,6 @@ function isCurrentPath($pathString, $onlyExact = false) {
 			</ul>
 	</nav>
 </header>
+</div>
 
 <main>
diff --git a/theme/images/bamboo-dark.png b/theme/images/bamboo-dark.png