feat: implement dark mode with theme toggle

- Add dark mode support across all components and pages
- Implement theme toggle button in navbar (desktop and mobile)
- Fix desktop theme toggle icon visibility issue
- Add dark mode color variants to all text, backgrounds and components
- Update Tailwind config to enable class-based dark mode
- Add dark mode support to prose styles for blog content
- Persist theme preference in localStorage
- Update all pages (index, bio, blog) with dark mode colors
- Optimize images (me.png and me-baby.jpg)
This commit is contained in:
Lorenzo Iovino 2026-01-09 16:20:24 +01:00
parent 7caf02fb36
commit df04844ca2
16 changed files with 392 additions and 203 deletions

View file

@ -27,7 +27,9 @@ const {
const siteUrl = "https://lorenzoiovino.com";
const defaultImage = mePhoto.src;
const fullImageUrl = image
? (image.startsWith("http") ? image : `${siteUrl}${image}`)
? image.startsWith("http")
? image
: `${siteUrl}${image}`
: `${siteUrl}${defaultImage}`;
const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
---
@ -171,12 +173,16 @@ const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
<style>
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2)
format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
U+FFFD;
}
</style>
@ -184,7 +190,7 @@ const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
<link rel="manifest" href="/manifest.json" />
<title>{title}</title>
</head>
<body class="bg-secondary min-h-screen">
<body class="bg-white dark:bg-gray-900 min-h-screen transition-colors duration-200">
<slot />
</body>
</html>