change light mode to line up better with dark mode

posts/axes-of-fantasy.mdx

@@ -5,7 +5,6 @@ draft: true
 ---
 
 import Sidenote from '@components/Sidenote.astro';
-import BookPreview from '@components/BookPreview.astro';
 
 For a while now, I've had a private taxonomy of fantasy books, based on the distinction (or lack thereof) between the fantasy world and our own. It goes something like this:
 
@@ -38,7 +37,7 @@ Notable subregions include:
 
 No overlap at all. I think most fantasy that's written tends to fall here. At least, it's what most people think of when you say "fantasy book," and the Wikipedia definition of "Fantasy" specifies that it's "typically set in a fictional universe," so I think it's fair to say that this is the "standard" position for a fantasy story to occupy on this axis.
 
-Examples: <BookPreview ref="lotr">_The Lord of the Rings_</BookPreview>, <BookPreview ref="earthsea">_Earthsea_</BookPreview>, _The Prydain Chronicles_, _Wheel of Time_, _Belgariad_, _A Song of Ice and Fire_, etc. Pick up a book from the fantasy section of a bookstore and there's at least a 50% chance it will fall into this category.
+Examples: _The Lord of the Rings_, _Earthsea_, _The Prydain Chronicles_, _Wheel of Time_, _Belgariad_, _A Song of Ice and Fire_, etc. Pick up a book from the fantasy section of a bookstore and there's at least a 50% chance it will fall into this category.
 
 ### Mythopoeic Fantasy
 
@@ -73,7 +72,7 @@ Fantasy that's set in our world, but with magic.<Sidenote>Or other fantastical e
 
 In the end, though, I decided that the point of this axis is to classify fantasy according to how much the fantasy world overlaps with our own, and alternate history involves _quite a lot of overlap_, even though the end result is a world that's not _quite_ identical with the real world.
 
-Broadly speaking there are two variants of alternate history: 1) Either the fantastic has always been a part of life, or 2) it was suddenly introduced into the world by some (usually fairly cataclysmic) event. 
+Broadly speaking there are two variants of alternate history: 1) Either the fantastic has always been a part of life, or 2) it was suddenly introduced into the world by some (usually fairly cataclysmic) event.
 
 Examples of the first variant include _Cecelia and Kate_, the _Temeraire_ books, _Jonathan Strange and Mr Norrell_, etc. An interesting quirk of this variant is that it's almost always set significantly in the past, but for some reason not _quite_ as far back as the quasi-Medieval era that is the bread and butter of most "standard" fantasy. The Napoleonic/Regency era is popular, as is the Victorian era. Modern-day alternate-history stories of this type seem fairly uncommon--_Bartimaeus_ is the only example I can think of off the top of my head.
 

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, */

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);
                     }
                 }
             }

src/styles/vars.css

@@ -12,24 +12,25 @@
         --content-size-sm: 0.9rem;
     }
 
-    /* light-mode colors */
+    /* light-mode colors (warm "paper" theme, harmonized with dark mode) */
-    --bg-color: hsl(0deg 0% 100%);
+    --bg-color: hsl(40deg 30% 97%);
     /* text */
-    --content-color: hsl(0deg 0% 20%);
+    --content-color: hsl(30deg 12% 22%);
-    --content-color-faded: #555;
+    --content-color-faded: hsl(30deg 8% 38%);
     /* links */
-    --primary-color: hsl(202deg 72% 28%);
+    --primary-color: hsl(202deg 55% 32%);
-    --primary-color-faded: hsl(202deg 14% 36%);
     /* indicators, hover effects, etc */
-    --accent-color: hsl(0deg 92% 29%);
+    --accent-color: hsl(18deg 75% 45%);
-    --accent-color-faded: hsl(0deg 25% 55%);
+    --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%);
+    --neutral-gray: hsl(30deg 6% 32%);
-    --inline-code-bg: hsl(0deg 0% 93%);
+    --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);