From 2ca66ccc6d19b893e468cd5b052d0b7a8f14d42e Mon Sep 17 00:00:00 2001 From: Nicholai Date: Thu, 18 Dec 2025 17:08:52 -0700 Subject: [PATCH] Update theme variable usage and add ThemeToggle component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Refactor component styles to use CSS custom properties for colors and backgrounds. - Replace hard‑coded Tailwind classes with theme variables across BlogCard, BlogFilters, Footer, GridOverlay, Navigation, PostNavigation, ReadingProgress, RelatedPosts, TableOfContents, ThemeToggle, sections, layouts, pages, and global.css. - Add ThemeToggle component for user‑controlled theme switching. - Update global styles to define new theme variables. - Ensure all components respect theme changes and maintain accessibility. Hubert The Eunuch --- src/components/BlogCard.astro | 27 +-- src/components/BlogFilters.astro | 29 ++- src/components/Footer.astro | 18 +- src/components/GridOverlay.astro | 25 +- src/components/Navigation.astro | 77 +++--- src/components/PostNavigation.astro | 35 ++- src/components/ReadingProgress.astro | 7 +- src/components/RelatedPosts.astro | 7 +- src/components/TableOfContents.astro | 22 +- src/components/ThemeToggle.astro | 87 +++++++ src/components/sections/Experience.astro | 181 ++++++++------ src/components/sections/FeaturedProject.astro | 26 +- src/components/sections/Hero.astro | 70 ++++-- src/components/sections/Skills.astro | 46 ++-- src/layouts/BaseLayout.astro | 13 +- src/layouts/BlogPost.astro | 36 +-- src/pages/blog/index.astro | 57 +++-- src/pages/contact.astro | 113 ++++----- src/styles/global.css | 227 +++++++++++++----- 19 files changed, 698 insertions(+), 405 deletions(-) create mode 100644 src/components/ThemeToggle.astro diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index b5cdf09..9d2bbe3 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -36,12 +36,12 @@ const isFeatured = variant === 'featured'; ---
-
+
)} -
-
+
+
{category && (
- + {category}
@@ -80,8 +80,8 @@ const isFeatured = variant === 'featured'; - - + + {readTime} @@ -89,7 +89,7 @@ const isFeatured = variant === 'featured';

{title} @@ -98,7 +98,7 @@ const isFeatured = variant === 'featured';

{description} @@ -108,7 +108,7 @@ const isFeatured = variant === 'featured'; {tags && tags.length > 0 && !isCompact && (

{tags.slice(0, 4).map((tag) => ( - + {tag} ))} @@ -118,14 +118,14 @@ const isFeatured = variant === 'featured';
Read Article - +

- diff --git a/src/components/BlogFilters.astro b/src/components/BlogFilters.astro index 5b9cc51..2622b2c 100644 --- a/src/components/BlogFilters.astro +++ b/src/components/BlogFilters.astro @@ -12,13 +12,13 @@ const { categories, class: className = '' } = Astro.props;
- + /// SECTOR SELECT @@ -26,7 +26,7 @@ const { categories, class: className = '' } = Astro.props; @@ -42,12 +42,12 @@ const { categories, class: className = '' } = Astro.props; type="text" id="blog-search" placeholder="SEARCH_DATABASE..." - class="w-full pl-6 pr-4 py-2 text-sm font-mono bg-transparent border-b border-slate-700 text-white placeholder:text-slate-600 focus:border-brand-accent focus:outline-none transition-colors duration-300 uppercase" + class="w-full pl-6 pr-4 py-2 text-sm font-mono bg-transparent border-b border-[var(--theme-text-subtle)] text-[var(--theme-text-primary)] placeholder:text-[var(--theme-text-subtle)] focus:border-brand-accent focus:outline-none transition-colors duration-300 uppercase" /> @@ -55,11 +55,11 @@ const { categories, class: className = '' } = Astro.props;
-
- +
+ 0 ARTICLES - +
@@ -122,13 +122,13 @@ const { categories, class: className = '' } = Astro.props; // Update active state // Reset all to inactive state filterChips.forEach((c) => { - c.classList.remove('active', 'border-brand-accent', 'text-white', 'bg-white/5'); - c.classList.add('border-transparent', 'text-slate-500'); + c.classList.remove('active', 'border-brand-accent', 'text-[var(--theme-text-primary)]', 'bg-[var(--theme-hover-bg-strong)]'); + c.classList.add('border-transparent', 'text-[var(--theme-text-muted)]'); }); // Set clicked to active state - chipEl.classList.add('active', 'border-brand-accent', 'text-white', 'bg-white/5'); - chipEl.classList.remove('border-transparent', 'text-slate-500'); + chipEl.classList.add('active', 'border-brand-accent', 'text-[var(--theme-text-primary)]', 'bg-[var(--theme-hover-bg-strong)]'); + chipEl.classList.remove('border-transparent', 'text-[var(--theme-text-muted)]'); filterPosts(); }); @@ -173,8 +173,7 @@ const { categories, class: className = '' } = Astro.props; - diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 46e6ccd..edf59ea 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -2,10 +2,10 @@ const today = new Date(); --- -