starred/aryx
1
0
Fork 0
mirror of https://github.com/davidkaya/aryx.git synced 2026-07-30 00:18:40 +02:00
Code Issues 3 Packages Projects Releases 10 Wiki Activity

feat(website): add light mode with theme toggle

Browse Source 
- Add [data-theme='light'] CSS variable overrides for warm parchment surface palette
- Add sun/moon theme toggle button in nav (desktop + mobile)
- Inline FOUC-prevention script in <head> reading localStorage/prefers-color-scheme
- Screenshot <img> elements swap between dark/light variants via data attributes
- Dynamic meta theme-color update and proper ARIA labels on toggle
- Adjust grain overlay, dot-grid, and gradient-text for light mode

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-31 16:35:17 +01:00
co-authored by Copilot
parent 63acd9e87e
commit 49933f218b
3 changed files with 165 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/layouts/Base.astro
+85
View File
@@ -42,6 +42,15 @@ const {
/>
<title>{title}</title>
<!-- Theme init (FOUC prevention) -->
<script is:inline>
(function () {
var saved = localStorage.getItem('theme');
var theme = saved || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
if (theme === 'light') document.documentElement.setAttribute('data-theme', 'light');
})();
</script>
</head>
<body class="min-h-screen bg-deep font-body text-warm-100 antialiased">
<!-- Navigation -->
@@ -63,6 +72,19 @@ const {
<a href="#get-started" class="text-sm text-warm-400 transition hover:text-warm-50"
>Get Started</a
>
<button
class="theme-toggle"
id="theme-toggle-desktop"
type="button"
aria-label="Switch to light theme"
>
<svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</button>
<a
href="https://github.com/davidkaya/aryx"
target="_blank"
@@ -108,6 +130,19 @@ const {
rel="noopener noreferrer"
class="text-sm text-warm-400 transition hover:text-warm-50">GitHub</a
>
<button
class="theme-toggle self-start"
id="theme-toggle-mobile"
type="button"
aria-label="Switch to light theme"
>
<svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</button>
</div>
</div>
</nav>
@@ -185,5 +220,55 @@ const {
);
document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
</script>
<!-- Theme toggle + screenshot swap -->
<script>
function getTheme() {
return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
}
function applyTheme(theme) {
if (theme === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
} else {
document.documentElement.removeAttribute('data-theme');
}
localStorage.setItem('theme', theme);
// Update meta theme-color
var meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', theme === 'light' ? '#f6f4f1' : '#08080a');
// Update aria-labels
var label = theme === 'light' ? 'Switch to dark theme' : 'Switch to light theme';
document.querySelectorAll('.theme-toggle').forEach(function (btn) {
btn.setAttribute('aria-label', label);
});
// Swap themed images
document.querySelectorAll('[data-src-dark]').forEach(function (img) {
img.setAttribute('src', theme === 'light' ? img.getAttribute('data-src-light') : img.getAttribute('data-src-dark'));
});
}
function toggleTheme() {
applyTheme(getTheme() === 'light' ? 'dark' : 'light');
}
// Bind toggle buttons
document.querySelectorAll('.theme-toggle').forEach(function (btn) {
btn.addEventListener('click', toggleTheme);
});
// Apply on load (screenshots + aria)
applyTheme(getTheme());
// Listen for system preference changes
matchMedia('(prefers-color-scheme: light)').addEventListener('change', function (e) {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'light' : 'dark');
}
});
</script>
</body>
</html>
website/src/pages/index.astro
+4
View File
@@ -109,6 +109,8 @@ import Base from '../layouts/Base.astro';
<div class="overflow-hidden rounded-[13px]">
<img
src="/images/screenshot.png"
data-src-dark="/images/screenshot.png"
data-src-light="/images/screenshot-light.png"
alt="Aryx application screenshot showing the workspace with chat, sidebar, and activity panel"
class="w-full"
width="1280"
@@ -686,6 +688,8 @@ import Base from '../layouts/Base.astro';
<div class="overflow-hidden rounded-[13px]">
<img
src="/images/screenshot-orchestration.png"
data-src-dark="/images/screenshot-orchestration.png"
data-src-light="/images/screenshot-orchestration-light.png"
alt="Aryx workspace showing multi-agent orchestration in action"
class="w-full"
width="1280"
website/src/styles/global.css
+76
View File
@@ -30,6 +30,31 @@
--color-accent-dim: #5A20E0;
}
/* ── Light mode token overrides ── */
[data-theme='light'] {
--color-deep: #f6f4f1;
--color-base: #efede9;
--color-raised: #e7e4df;
--color-card: #ffffff;
--color-card-hover: #f9f8f6;
--color-border: #d8d4cd;
--color-border-subtle: #e5e2dc;
--color-warm-50: #1a1917;
--color-warm-100: #2e2c28;
--color-warm-200: #403d38;
--color-warm-300: #5e5950;
--color-warm-400: #7d776e;
--color-warm-500: #9e9890;
--color-warm-600: #c4bfb5;
--color-warm-700: #d8d4cd;
--color-warm-800: #eae7e2;
--color-brand: #1a4fd4;
--color-brand-bright: #1d7ae0;
--color-accent: #7522c9;
}
/* ── Grain overlay ── */
body::after {
content: '';
@@ -42,6 +67,9 @@ body::after {
background-repeat: repeat;
background-size: 256px 256px;
}
[data-theme='light'] body::after {
opacity: 0.04;
}
/* ── Dot grid ── */
.dot-grid {
@@ -52,6 +80,13 @@ body::after {
);
background-size: 28px 28px;
}
[data-theme='light'] .dot-grid {
background-image: radial-gradient(
circle,
rgba(26, 79, 212, 0.10) 1px,
transparent 1px
);
}
/* ── Screenshot perspective tilt ── */
.screenshot-frame {
@@ -116,3 +151,44 @@ body::after {
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme='light'] .text-gradient-brand {
background: linear-gradient(135deg, #1a4fd4, #7522c9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Screenshot frame light-mode shadow ── */
[data-theme='light'] .screenshot-frame {
--tw-shadow-color: rgba(0, 0, 0, 0.08);
--tw-ring-color: rgba(0, 0, 0, 0.04);
}
/* ── Theme toggle ── */
.theme-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
border: none;
background: transparent;
cursor: pointer;
color: var(--color-warm-400);
transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle:hover {
color: var(--color-warm-50);
background: var(--color-raised);
}
.theme-toggle svg {
width: 1.125rem;
height: 1.125rem;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme='light'] .theme-toggle .icon-sun { display: block; }
[data-theme='light'] .theme-toggle .icon-moon { display: none; }