mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-27 13:23:57 +02:00
feat(website): add light mode with theme toggle
- 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
@@ -42,6 +42,15 @@ const {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<title>{title}</title>
|
<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>
|
</head>
|
||||||
<body class="min-h-screen bg-deep font-body text-warm-100 antialiased">
|
<body class="min-h-screen bg-deep font-body text-warm-100 antialiased">
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
@@ -63,6 +72,19 @@ const {
|
|||||||
<a href="#get-started" class="text-sm text-warm-400 transition hover:text-warm-50"
|
<a href="#get-started" class="text-sm text-warm-400 transition hover:text-warm-50"
|
||||||
>Get Started</a
|
>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
|
<a
|
||||||
href="https://github.com/davidkaya/aryx"
|
href="https://github.com/davidkaya/aryx"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -108,6 +130,19 @@ const {
|
|||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="text-sm text-warm-400 transition hover:text-warm-50">GitHub</a
|
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>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -185,5 +220,55 @@ const {
|
|||||||
);
|
);
|
||||||
document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
|
document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
|
||||||
</script>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -109,6 +109,8 @@ import Base from '../layouts/Base.astro';
|
|||||||
<div class="overflow-hidden rounded-[13px]">
|
<div class="overflow-hidden rounded-[13px]">
|
||||||
<img
|
<img
|
||||||
src="/images/screenshot.png"
|
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"
|
alt="Aryx application screenshot showing the workspace with chat, sidebar, and activity panel"
|
||||||
class="w-full"
|
class="w-full"
|
||||||
width="1280"
|
width="1280"
|
||||||
@@ -686,6 +688,8 @@ import Base from '../layouts/Base.astro';
|
|||||||
<div class="overflow-hidden rounded-[13px]">
|
<div class="overflow-hidden rounded-[13px]">
|
||||||
<img
|
<img
|
||||||
src="/images/screenshot-orchestration.png"
|
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"
|
alt="Aryx workspace showing multi-agent orchestration in action"
|
||||||
class="w-full"
|
class="w-full"
|
||||||
width="1280"
|
width="1280"
|
||||||
|
|||||||
@@ -30,6 +30,31 @@
|
|||||||
--color-accent-dim: #5A20E0;
|
--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 ── */
|
/* ── Grain overlay ── */
|
||||||
body::after {
|
body::after {
|
||||||
content: '';
|
content: '';
|
||||||
@@ -42,6 +67,9 @@ body::after {
|
|||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-size: 256px 256px;
|
background-size: 256px 256px;
|
||||||
}
|
}
|
||||||
|
[data-theme='light'] body::after {
|
||||||
|
opacity: 0.04;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Dot grid ── */
|
/* ── Dot grid ── */
|
||||||
.dot-grid {
|
.dot-grid {
|
||||||
@@ -52,6 +80,13 @@ body::after {
|
|||||||
);
|
);
|
||||||
background-size: 28px 28px;
|
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 perspective tilt ── */
|
||||||
.screenshot-frame {
|
.screenshot-frame {
|
||||||
@@ -116,3 +151,44 @@ body::after {
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
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; }
|
||||||
|
|||||||
Reference in New Issue
Block a user