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 {
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
+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 */}
<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
+22 -16
View File
@@ -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);