From f987ebead840431af4c71297f71258d9d02f21ad Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Sun, 6 Nov 2022 17:25:01 -0500
Subject: [PATCH] Improve colors, add dark mode

---
 themes/red/assets/css/site.css                | 56 +++++++++++++++----
 .../layouts/_default/_markup/render-link.html |  2 +-
 themes/red/layouts/partials/head.html         |  4 +-
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css
index 4f2f685..38834b7 100644
--- a/themes/red/assets/css/site.css
+++ b/themes/red/assets/css/site.css
@@ -39,13 +39,49 @@
 }
 
 body {
-    --accent-color: #d26c6c;
-
-    background-color: #e3e3e3;
+    background-color: var(--background-primary);
     accent-color: var(--accent-color);
 
     display: flex;
     flex-flow: row wrap;
+
+    color: var(--text-color);
+}
+
+:root {
+    --primary-accent: #9f5858;
+    --secondary-accent: #c99192;
+    --border-color: #325e8d;
+    --background-primary: #eff1ff;
+    --background-secondary: #ffffff;
+    --text-color: #363131;
+    --link-visited: #460b0b;
+    --extra-color: #efe4e4;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --primary-accent: #ce4545;
+        --secondary-accent: #c99192;
+        --background-primary: #34313a;
+        --background-secondary: #3c3a44;
+        --border-color: #515860;
+        --text-color: #fbeded;
+        --link-visited: #ad1616;
+        --extra-color: #504e5a;
+    }
+
+    .ext-link {
+        filter: invert(100%);
+    }
+}
+
+a:link {
+    color: var(--primary-accent);
+}
+
+a:visited {
+    color: var(--link-visited);
 }
 
 header {
@@ -54,19 +90,19 @@ header {
 }
 
 aside {
-    background-color: white;
+    background-color: var(--background-secondary);
 
     text-align: center;
 
-    border: 1px solid black;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
     padding: 15px;
 }
 
 article {
-    background-color: white;
+    background-color: var(--background-secondary);
 
-    border: 1px solid black;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
 
     padding: 15px;
@@ -75,12 +111,12 @@ article {
 }
 
 footer {
-    background-color: white;
+    background-color: var(--background-secondary);
 
     flex-grow: 1;
     flex-basis: 100%;
 
-    border: 1px solid black;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
 
     padding: 15px;
@@ -125,7 +161,7 @@ td {
 }
 
 tr:nth-child(even) {
-    background-color: #e2d9d9;
+    background-color: var(--extra-color);
 }
 
 table {
diff --git a/themes/red/layouts/_default/_markup/render-link.html b/themes/red/layouts/_default/_markup/render-link.html
index a58524a..6972122 100644
--- a/themes/red/layouts/_default/_markup/render-link.html
+++ b/themes/red/layouts/_default/_markup/render-link.html
@@ -1,4 +1,4 @@
 {{ $icon := resources.Get "external-link.svg" }}
 
-<a href="{{ .Destination | safeURL }}" {{ if strings.HasPrefix .Destination "http" }}
+<a class="ext-link" href="{{ .Destination | safeURL }}" {{ if strings.HasPrefix .Destination "http" }}
 target="_blank"{{ end }}>{{ .PlainText }}{{ if strings.HasPrefix .Destination "http" }}<img aria-hidden="true" alt="External link" width="16" height="16" src="{{ $icon.Permalink }}"/>{{- end -}}</a>
\ No newline at end of file
diff --git a/themes/red/layouts/partials/head.html b/themes/red/layouts/partials/head.html
index 9cc4fcc..12398fb 100644
--- a/themes/red/layouts/partials/head.html
+++ b/themes/red/layouts/partials/head.html
@@ -2,8 +2,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <meta name="theme-color" content="#fffff" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="rgb(51 65 85)" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#eff1ff" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#34313a" media="(prefers-color-scheme: dark)">
 
     {{ if .IsHome }}
         <meta name="description" content="{{ $.Site.Params.description }}">