jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change light mode to line up better with dark mode

Browse Source
This commit is contained in:
Joseph Montanaro
2026-06-22 12:11:04 -04:00
parent 6385ef9a86
commit 8799733474
3 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ThemeSwitcher.astro
+1 -1
View File
@@ -34,7 +34,7 @@ button {
&:hover { &:hover {
cursor: pointer; 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, */ /* hide by default, i.e. if JS isn't enabled and the data-theme attribute didn't get set, */
src/layouts/BaseLayout.astro
+2 -2
View File
@@ -31,7 +31,7 @@ const { pageTitle } = Astro.props;
{/* Note: The styles are inside the document here because otherwise it breaks Astro's parsing */} {/* Note: The styles are inside the document here because otherwise it breaks Astro's parsing */}
<style> <style>
header { header {
background-color: var(--primary-color-faded); background-color: var(--navbar-color);
padding: 0.5rem var(--content-padding); padding: 0.5rem var(--content-padding);
} }
@@ -61,7 +61,7 @@ const { pageTitle } = Astro.props;
} }
&:hover, &:active { &:hover, &:active {
text-decoration-color: var(--accent-color); text-decoration-color: var(--navbar-accent-color);
} }
} }
} }
src/styles/vars.css
+22 -16
View File
@@ -12,24 +12,25 @@
--content-size-sm: 0.9rem; --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 */ /* 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 */ /* links */
--primary-color: hsl(202deg 72% 28%); --primary-color: hsl(202deg 55% 32%);
--primary-color-faded: hsl(202deg 14% 36%);
/* indicators, hover effects, etc */ /* 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 */ /* 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: var(--primary-color);
--link-color-visited: var(--accent-color-faded); --link-color-visited: var(--accent-color-faded);
--nav-link-color: white; --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); --inline-code-color: var(--content-color);
/* dark-mode colors (defined here so that we only have to update them in one place) */ /* 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: hsl(30deg 10% 75%);
--dark-content-color-faded: hsl(25deg 6% 50%); --dark-content-color-faded: hsl(25deg 6% 50%);
--dark-primary-color: hsl(220deg 15% 40%); --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: hsl(18deg 70% 55%);
--dark-accent-color-faded: hsl(18deg 30% 45%); --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-heading-color: hsl(35deg 25% 88%);
--dark-link-color: hsl(202deg 50% 50%); --dark-link-color: hsl(202deg 50% 50%);
--dark-link-color-visited: hsl(270deg 33% 55%); --dark-link-color-visited: hsl(270deg 33% 55%);
@@ -53,9 +57,10 @@
--content-color: var(--dark-content-color); --content-color: var(--dark-content-color);
--content-color-faded: var(--dark-content-color-faded); --content-color-faded: var(--dark-content-color-faded);
--primary-color: var(--dark-primary-color); --primary-color: var(--dark-primary-color);
--primary-color-faded: var(--dark-primary-color-faded);
--accent-color: var(--dark-accent-color); --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); --heading-color: var(--dark-heading-color);
--link-color: var(--dark-link-color); --link-color: var(--dark-link-color);
--link-color-visited: var(--dark-link-color-visited); --link-color-visited: var(--dark-link-color-visited);
@@ -72,9 +77,10 @@
--content-color: var(--dark-content-color); --content-color: var(--dark-content-color);
--content-color-faded: var(--dark-content-color-faded); --content-color-faded: var(--dark-content-color-faded);
--primary-color: var(--dark-primary-color); --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: 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); --heading-color: var(--dark-heading-color);
--link-color: var(--dark-link-color); --link-color: var(--dark-link-color);
--link-color-visited: var(--dark-link-color-visited); --link-color-visited: var(--dark-link-color-visited);