[feat] Add a light theme to the marketing site with a system-aware switcher - #6124
Merged
Conversation
…itcher
The site was dark-only. Every component hard-coded its dark colors inline,
so there was no way to render it light.
Colors now resolve through semantic --th-* tokens in src/styles/theme.css.
The :root values are light (ported from the light-mode design mockups); the
[data-theme="dark"] values reproduce the previous literals exactly, so dark
mode is unchanged.
An inline script in Base.astro sets data-theme on <html> before first paint
from localStorage("ag-theme"), defaulting to the OS preference and tracking
it live. SiteNav gains a switcher that cycles system, light, and dark.
Layout, spacing, type, and content are untouched. Sections the design keeps
dark in light mode (Reliability, Open source, the Enterprise plan card, the
terminal) stay dark, with only their surface tuned per theme.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (5)
Disabled knowledge base sources:
📝 SummarySummary by CodeRabbit
WalkthroughThe website adds light and dark theme support, shared ChangesWebsite UI theming and primitives
Estimated code review effort: 4 (Complex) | ~60 minutes Merge Risk: 🟡 Moderate · up to Light-mode users can see dark browser chrome, and Windows contributors can be blocked from building the website. These issues should be fixed before merge. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 21.43% which is insufficient. The required threshold is 60.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 14 functions across 5 files. (34 skipped: 34 unsupported.)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…hip and button through one component Framer measurements drove every value here. The rest-state nav bar is the first band of the page grid: 1px left, right and bottom border in the grid colour, going transparent once the bar becomes the pill. The blog, author and pricing bodies are flat white bands with no side lines, while the nav, the CTA band and the footer keep the grid, exactly as Framer draws them. The dark pill gets the same four-layer border as the light one so the side rules meet a visible edge. Every full-width band now renders through components/Section.astro, which owns the grid border and the -1px overlap (tone: grid, dark, flat). Every eyebrow chip renders through components/Badge.astro or its .ag-badge class (24px, uppercase, 12px/400, 1px outline, transparent inside, ink-600). The last hand-drawn buttons on the contact page and in the blog inline CTA use the shared .ag-btn. The landing page renders through the shared Site layout like every other page, so the 1440 column is defined once. scripts/check-ui-primitives.mjs runs before every build and fails when a page draws the frame, the grid, a chip or a button by hand. The rules are documented in website/AGENTS.md. Claude-Session: https://claude.ai/code/session_01Q2VVWyYPi7hVthnGiqGPXU
mmabrouk
marked this pull request as ready for review
September 3, 2026 19:02
Contributor
Website previewPreview URL: https://pr-6124-agenta-website-preview.mahmoud-637.workers.dev Built from |
mmabrouk
enabled auto-merge
September 3, 2026 19:05
Resolves three conflicts: the build scripts in package.json (main's OpenAPI copy and build verification join the UI-primitive guard), and the Open source and Open standards headers (main's real <h2> headings keep the shared Badge eyebrow and the theme colours). Main's new /api page gets the shared Badge and Section like every other page; the guard caught its hand-drawn chip. Claude-Session: https://claude.ai/code/session_01Q2VVWyYPi7hVthnGiqGPXU
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Team
Run ID: 589119e5-6bfe-43e3-b203-19b86174d355
📒 Files selected for processing (38)
website/AGENTS.mdwebsite/package.jsonwebsite/scripts/check-ui-primitives.mjswebsite/src/components/Badge.astrowebsite/src/components/Button.astrowebsite/src/components/CategoryFilter.tsxwebsite/src/components/CtaBand.astrowebsite/src/components/Hero.astrowebsite/src/components/HeroVideo.astrowebsite/src/components/HostingToggle.tsxwebsite/src/components/HowItWorks.astrowebsite/src/components/HowItWorks.tsxwebsite/src/components/InlineCta.astrowebsite/src/components/OpenSource.astrowebsite/src/components/OpenStandards.astrowebsite/src/components/PlanCard.astrowebsite/src/components/PostCard.astrowebsite/src/components/Reliability.astrowebsite/src/components/Section.astrowebsite/src/components/SectionTitle.astrowebsite/src/components/SiteFooter.astrowebsite/src/components/SiteNav.astrowebsite/src/components/TemplateExplorer.tsxwebsite/src/components/TemplateSection.astrowebsite/src/layouts/Base.astrowebsite/src/layouts/Site.astrowebsite/src/pages/404.astrowebsite/src/pages/authors/[slug].astrowebsite/src/pages/authors/index.astrowebsite/src/pages/blog/[slug].astrowebsite/src/pages/blog/index.astrowebsite/src/pages/contact.astrowebsite/src/pages/imprint.astrowebsite/src/pages/index.astrowebsite/src/pages/pricing.astrowebsite/src/styles/global.csswebsite/src/styles/theme.csswebsite/src/styles/tokens.css
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.
Contributor
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
website/src/layouts/Base.astro (1)
74-75: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMove the
theme-colormeta element before the initializer or update it after insertion. With the default system preference resolving to light, the initializer runs before the meta element exists, so the later dark value remains. Supported browsers can use that value for dark browser chrome while the page is light.website/scripts/check-ui-primitives.mjs (1)
18-18: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winConvert the file URL with
fileURLToPathbefore scanningsrc. On Windows,URL.pathnameproduces/C:/..., which is not the Windows filesystem path expected byreaddirSync. The guard can therefore fail beforeastro build, becausewebsite/package.jsonruns it first.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Team
Run ID: 90e1bd5f-a58e-4655-aa49-c0dc332eca6e
📒 Files selected for processing (39)
website/AGENTS.mdwebsite/package.jsonwebsite/scripts/check-ui-primitives.mjswebsite/src/components/Badge.astrowebsite/src/components/Button.astrowebsite/src/components/CategoryFilter.tsxwebsite/src/components/CtaBand.astrowebsite/src/components/Hero.astrowebsite/src/components/HeroVideo.astrowebsite/src/components/HostingToggle.tsxwebsite/src/components/HowItWorks.astrowebsite/src/components/HowItWorks.tsxwebsite/src/components/InlineCta.astrowebsite/src/components/OpenSource.astrowebsite/src/components/OpenStandards.astrowebsite/src/components/PlanCard.astrowebsite/src/components/PostCard.astrowebsite/src/components/Reliability.astrowebsite/src/components/Section.astrowebsite/src/components/SectionTitle.astrowebsite/src/components/SiteFooter.astrowebsite/src/components/SiteNav.astrowebsite/src/components/TemplateExplorer.tsxwebsite/src/components/TemplateSection.astrowebsite/src/layouts/Base.astrowebsite/src/layouts/Site.astrowebsite/src/pages/404.astrowebsite/src/pages/api.astrowebsite/src/pages/authors/[slug].astrowebsite/src/pages/authors/index.astrowebsite/src/pages/blog/[slug].astrowebsite/src/pages/blog/index.astrowebsite/src/pages/contact.astrowebsite/src/pages/imprint.astrowebsite/src/pages/index.astrowebsite/src/pages/pricing.astrowebsite/src/styles/global.csswebsite/src/styles/theme.csswebsite/src/styles/tokens.css
🚧 Files skipped from review as they are similar to previous changes (36)
- website/src/components/PlanCard.astro
- website/scripts/check-ui-primitives.mjs
- website/package.json
- website/src/pages/index.astro
- website/src/components/SectionTitle.astro
- website/src/layouts/Site.astro
- website/src/components/CtaBand.astro
- website/src/components/HostingToggle.tsx
- website/src/styles/theme.css
- website/src/components/TemplateSection.astro
- website/src/components/Hero.astro
- website/src/components/SiteNav.astro
- website/src/pages/authors/index.astro
- website/src/components/HeroVideo.astro
- website/src/components/Section.astro
- website/src/pages/imprint.astro
- website/src/layouts/Base.astro
- website/src/pages/authors/[slug].astro
- website/src/components/OpenSource.astro
- website/src/components/Button.astro
- website/src/pages/contact.astro
- website/src/components/HowItWorks.astro
- website/src/pages/404.astro
- website/src/components/InlineCta.astro
- website/AGENTS.md
- website/src/components/Badge.astro
- website/src/components/HowItWorks.tsx
- website/src/components/TemplateExplorer.tsx
- website/src/pages/pricing.astro
- website/src/styles/tokens.css
- website/src/pages/blog/index.astro
- website/src/components/CategoryFilter.tsx
- website/src/pages/blog/[slug].astro
- website/src/components/OpenStandards.astro
- website/src/components/SiteFooter.astro
- website/src/components/Reliability.astro
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
ashrafchowdury
approved these changes
Sep 4, 2026
Four fixes from the CodeRabbit pass, all confirmed against the code: - check-ui-primitives.mjs resolved its source root through URL.pathname, which returns "/C:/..." on Windows and would fail every fs call before astro build starts. It uses fileURLToPath now. - Button dropped every attribute outside its own prop list, so callers could not set id, type, disabled, aria-*, data-* or download. It extends the Astro HTML attributes and spreads the rest onto the rendered element. - SectionTitle wrote #FFFFFF twice and .ag-btn--dark wrote #ffffff, against the rule that a component never carries a hex. All three use --text-on-dark. - The theme-color meta element sat after the pre-paint theme resolver, so querySelector found nothing on the first run and a light first paint kept the dark colour until the next theme change. The meta element now precedes the resolver. Verified: a light first paint reports #F6F5F3. Claude-Session: https://claude.ai/code/session_01Q2VVWyYPi7hVthnGiqGPXU
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The marketing site only had a dark theme. Every component hard-coded its dark colors in inline styles, so there was no seam to render it any other way. Design handed over light versions of the landing, pricing, blog, and blog post pages, and we want the site to follow the visitor's system preference.
Changes
Colors now resolve through semantic
--th-*tokens defined in the newsrc/styles/theme.css. The:rootblock holds the light values taken from the design mockups. The[data-theme="dark"]block holds the exact literals that were in the components before, so dark mode renders the same as it does today.Before, in
Hero.astro:After:
Where no token fits because the two themes need unrelated values, the component defines its own pair instead:
An inline script in
Base.astroruns before the stylesheets and setsdata-themeon<html>. It readslocalStorage("ag-theme"), which holdssystem,light, ordarkand defaults tosystem. In system mode it followsprefers-color-schemeand updates live when the OS theme changes. Because it runs before first paint, there is no flash of the wrong theme. It also keeps thetheme-colormeta tag in sync.SiteNavgains a switcher next to the CTAs. It cycles system, light, and dark, and shows a monitor, sun, or moon icon for the current preference. It appears in the mobile menu too.Layout, spacing, typography, and copy are untouched. The mockups moved some elements around (for example the highlighted word in the hero headline); those differences were deliberately not carried over, since this PR only changes the theme.
Sections that the light design keeps dark stay dark: Reliability, Open source with its terminal, and the Enterprise plan card. Only their surface color is tuned per theme, using the warmer carbons the light design calls for. Blog and author pages use white chrome in light, matching the mockups.
Tests / notes
pnpm buildsucceeds (48 pages). Deployed to the preview worker and confirmed the switcher works there: https://agenta-website-preview.mahmoud-637.workers.dev/What to QA