From 8799733474178a7381978ee2a00fc2de760566bd Mon Sep 17 00:00:00 2001
From: Joseph Montanaro <jfmonty2@gmail.com>
Date: Mon, 22 Jun 2026 12:11:04 -0400
Subject: [PATCH] change light mode to line up better with dark mode

---
 src/components/ThemeSwitcher.astro |  2 +-
 src/layouts/BaseLayout.astro       |  4 ++--
 src/styles/vars.css                | 38 +++++++++++++++++-------------
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
index ddcf29b..8567418 100644
--- a/src/components/ThemeSwitcher.astro
+++ b/src/components/ThemeSwitcher.astro
@@ -34,7 +34,7 @@ button {
 
     &:hover {
         cursor: pointer;
-        color: var(--accent-color);
+        color: var(--navbar-accent-color);
     }
 
     /* hide by default, i.e. if JS isn't enabled and the data-theme attribute didn't get set, */
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index a4705fd..1ca4ff5 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -31,7 +31,7 @@ const { pageTitle } = Astro.props;
         {/* Note: The styles are inside the document here because otherwise it breaks Astro's parsing */}
         <style>
             header {
-                background-color: var(--primary-color-faded);
+                background-color: var(--navbar-color);
                 padding: 0.5rem var(--content-padding);
             }
 
@@ -61,7 +61,7 @@ const { pageTitle } = Astro.props;
                     }
 
                     &:hover, &:active {
-                        text-decoration-color: var(--accent-color);
+                        text-decoration-color: var(--navbar-accent-color);
                     }
                 }
             }
diff --git a/src/styles/vars.css b/src/styles/vars.css
index b6e60dd..814aa89 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.css
@@ -12,24 +12,25 @@
         --content-size-sm: 0.9rem;
     }
 
-    /* light-mode colors */
-    --bg-color: hsl(0deg 0% 100%);
+    /* light-mode colors (warm "paper" theme, harmonized with dark mode) */
+    --bg-color: hsl(40deg 30% 97%);
     /* text */
-    --content-color: hsl(0deg 0% 20%);
-    --content-color-faded: #555;
+    --content-color: hsl(30deg 12% 22%);
+    --content-color-faded: hsl(30deg 8% 38%);
     /* links */
-    --primary-color: hsl(202deg 72% 28%);
-    --primary-color-faded: hsl(202deg 14% 36%);
+    --primary-color: hsl(202deg 55% 32%);
     /* indicators, hover effects, etc */
-    --accent-color: hsl(0deg 92% 29%);
-    --accent-color-faded: hsl(0deg 25% 55%);
+    --accent-color: hsl(18deg 75% 45%);
+    --accent-color-faded: hsl(14deg 35% 50%);
     /* misc */
-    --heading-color: hsl(0deg 0% 27%);
+    --navbar-color: hsl(220deg 12% 34%);
+    --navbar-accent-color: hsl(18deg 80% 55%);
+    --heading-color: hsl(30deg 18% 25%);
     --link-color: var(--primary-color);
     --link-color-visited: var(--accent-color-faded);
     --nav-link-color: white;
-    --neutral-gray: hsl(0deg 0% 30%);
-    --inline-code-bg: hsl(0deg 0% 93%);
+    --neutral-gray: hsl(30deg 6% 32%);
+    --inline-code-bg: hsl(40deg 22% 91%);
     --inline-code-color: var(--content-color);
 
     /* dark-mode colors (defined here so that we only have to update them in one place) */
@@ -37,9 +38,12 @@
     --dark-content-color: hsl(30deg 10% 75%);
     --dark-content-color-faded: hsl(25deg 6% 50%);
     --dark-primary-color: hsl(220deg 15% 40%);
-    --dark-primary-color-faded: hsl(220deg 12% 18%);
     --dark-accent-color: hsl(18deg 70% 55%);
     --dark-accent-color-faded: hsl(18deg 30% 45%);
+    --dark-navbar-color: hsl(220deg 12% 18%);
+    /* dark mode navbar is much close to the page background,
+    so it doesn't need a separate accent color like light mode */
+    --dark-navbar-accent-color: var(--dark-accent-color);
     --dark-heading-color: hsl(35deg 25% 88%);
     --dark-link-color: hsl(202deg 50% 50%);
     --dark-link-color-visited: hsl(270deg 33% 55%);
@@ -53,9 +57,10 @@
         --content-color: var(--dark-content-color);
         --content-color-faded: var(--dark-content-color-faded);
         --primary-color: var(--dark-primary-color);
-        --primary-color-faded: var(--dark-primary-color-faded);
         --accent-color: var(--dark-accent-color);
-        --accent-color-faded: var(--accent-color-faded);
+        --accent-color-faded: var(--dark-accent-color-faded);
+        --navbar-color: var(--dark-navbar-color);
+        --navbar-accent-color: var(--dark-navbar-accent-color);
         --heading-color: var(--dark-heading-color);
         --link-color: var(--dark-link-color);
         --link-color-visited: var(--dark-link-color-visited);
@@ -72,9 +77,10 @@
             --content-color: var(--dark-content-color);
             --content-color-faded: var(--dark-content-color-faded);
             --primary-color: var(--dark-primary-color);
-            --primary-color-faded: var(--dark-primary-color-faded);
+            --navbar-color: var(--dark-navbar-color);
+            --navbar-accent-color: var(--dark-navbar-accent-color);
             --accent-color: var(--dark-accent-color);
-            --accent-color-faded: var(--accent-color-faded);
+            --accent-color-faded: var(--dark-accent-color-faded);
             --heading-color: var(--dark-heading-color);
             --link-color: var(--dark-link-color);
             --link-color-visited: var(--dark-link-color-visited);