Skip to content

feat: Add dark mode support to website and blog #6589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
franciscojavierarceo merged 2 commits into from
Jul 8, 2026
Merged

feat: Add dark mode support to website and blog #6589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c707539
feat: Add dark mode support to website and blog
franciscojavierarceo Jul 8, 2026
a3b935b
Merge branch 'master' into feat/website-dark-mode
franciscojavierarceo Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 68 additions & 12 deletions infra/website/src/components/Navigation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,29 @@
<a href="https://slack.feast.dev/" class="nav-item">COMMUNITY</a>
</div>

<button class="mobile-menu-button" id="mobile-menu-button">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<div class="nav-right">
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
<button class="mobile-menu-button" id="mobile-menu-button">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>

<div class="mobile-menu" id="mobile-menu">
Expand All @@ -38,7 +56,7 @@
top: 0;
left: 0;
right: 0;
background-color: white;
background-color: var(--color-nav-bg);
z-index: 1000;
}

Expand Down Expand Up @@ -80,22 +98,50 @@
margin-left: 32px;
}

.nav-right {
display: flex;
align-items: center;
gap: 4px;
padding-right: var(--content-padding);
}

.theme-toggle {
background: none;
border: none;
padding: 8px;
cursor: pointer;
color: var(--color-text);
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.2s ease;
}

.theme-toggle:hover {
opacity: 1;
}

.icon-sun { display: none; }
.icon-moon { display: block; }
:global([data-theme="dark"]) .icon-sun { display: block; }
:global([data-theme="dark"]) .icon-moon { display: none; }

.mobile-menu-button {
display: block;
background: none;
border: none;
padding: 8px;
cursor: pointer;
color: var(--color-text);
margin-right: var(--content-padding);
}

@media (min-width: 1024px) {
.desktop-menu {
display: flex;
align-items: center;
}

.mobile-menu-button {
display: none;
}
Expand All @@ -104,9 +150,9 @@
.mobile-menu {
display: none;
width: 100%;
background: white;
background: var(--color-nav-bg);
padding: 16px 0;
border-top: 1px solid #eee;
border-top: 1px solid var(--color-border);
position: absolute;
top: 52px;
left: 0;
Expand All @@ -122,17 +168,27 @@
}

.mobile-menu a:hover {
background-color: #f5f5f5;
background-color: var(--color-nav-hover);
}
</style>

<script>
const menuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');

if (menuButton && mobileMenu) {
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('active');
});
}

const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
});
}
</script>
12 changes: 11 additions & 1 deletion infra/website/src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,17 @@ const {
<link rel="icon" href="/images/feast_icon-black.png" sizes="192x192">
<link rel="apple-touch-icon" href="/images/feast_icon-black.png">
</head>
<body class="bg-white">
<script is:inline>
(function() {
const saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-theme', saved);
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
</script>
<body>
<slot name="header" />
<main>
<slot />
Expand Down
15 changes: 11 additions & 4 deletions infra/website/src/layouts/BlogLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const { frontmatter } = Astro.props;
<header class="mb-8">
<h1 class="font-mono font-bold text-4xl mb-2">{frontmatter.title}</h1>
{frontmatter.date && (
<time class="font-mono text-sm text-gray-500 block" datetime={frontmatter.date}>
<time class="blog-date" datetime={frontmatter.date}>
{new Date(frontmatter.date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
Expand All @@ -34,6 +34,13 @@ const { frontmatter } = Astro.props;
</BaseLayout>

<style>
.blog-date {
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-text-secondary);
display: block;
}

.blog-content {
font-family: var(--font-sans);
}
Expand Down Expand Up @@ -77,13 +84,13 @@ const { frontmatter } = Astro.props;

.blog-content :global(code) {
font-family: var(--font-mono);
background-color: #f5f5f5;
background-color: var(--color-surface);
padding: 0.2em 0.4em;
border-radius: 3px;
}

.blog-content :global(pre) {
background-color: #f5f5f5;
background-color: var(--color-surface);
padding: 1em;
border-radius: 5px;
overflow-x: auto;
Expand Down
20 changes: 10 additions & 10 deletions infra/website/src/pages/blog/[slug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
max-width: 1024px;
padding: 0 20px;
word-break: break-word;
color: rgb(0, 0, 0);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-feature-settings: "ss03";
Expand All @@ -116,15 +116,15 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
font-family: var(--font-sans);
font-size: 20px;
line-height: 1.5;
color: #666;
color: var(--color-text-secondary);
margin: 0 auto 24px;
max-width: 768px;
}

.blog-meta {
font-family: var(--font-sans);
font-size: 14px;
color: #666;
color: var(--color-text-secondary);
display: flex;
gap: 16px;
justify-content: center;
Expand Down Expand Up @@ -197,7 +197,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;

/* Code blocks */
.blog-content :global(pre) {
background: #f6f8fa;
background: var(--color-surface);
padding: 16px;
border-radius: 4px;
overflow-x: auto;
Expand All @@ -207,7 +207,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
.blog-content :global(code) {
font-family: var(--font-mono);
font-size: 14px;
background: #f6f8fa;
background: var(--color-surface);
padding: 2px 4px;
border-radius: 3px;
}
Expand Down Expand Up @@ -259,7 +259,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;

.blog-content :global(figcaption) {
font-size: 14px;
color: #666;
color: var(--color-text-secondary);
text-align: center;
margin-top: 8px;
}
Expand All @@ -278,9 +278,9 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
.blog-content :global(blockquote) {
margin: 24px 0;
padding-left: 16px;
border-left: 4px solid #ddd;
border-left: 4px solid var(--color-border);
font-style: italic;
color: #555;
color: var(--color-text-secondary);
}

/* Tables */
Expand All @@ -293,12 +293,12 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
.blog-content :global(th),
.blog-content :global(td) {
padding: 12px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
text-align: left;
}

.blog-content :global(th) {
background: #f6f8fa;
background: var(--color-surface);
font-weight: 600;
}

Expand Down
8 changes: 4 additions & 4 deletions infra/website/src/pages/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const sortedPosts = posts.sort((a, b) => {
max-width: 1024px;
padding: 0 20px;
word-break: break-word;
color: rgb(0, 0, 0);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-feature-settings: "ss03";
Expand All @@ -88,7 +88,7 @@ const sortedPosts = posts.sort((a, b) => {
font-family: var(--font-sans);
font-size: 20px;
line-height: 1.5;
color: #666;
color: var(--color-text-secondary);
margin: 0 auto 24px;
max-width: 768px;
}
Expand All @@ -115,7 +115,7 @@ const sortedPosts = posts.sort((a, b) => {
.post-date {
font-family: var(--font-mono);
font-size: 14px;
color: #666;
color: var(--color-text-secondary);
white-space: nowrap;
}

Expand Down Expand Up @@ -147,7 +147,7 @@ const sortedPosts = posts.sort((a, b) => {
.post-authors {
font-family: var(--font-sans);
font-size: 14px;
color: #666;
color: var(--color-text-secondary);
}

@media (max-width: 768px) {
Expand Down
Loading
Loading