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
 

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 */
-    --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);