💄 Add light/dark mode toggle to the v3 homepage#4867
Draft
joshbermanssw wants to merge 13 commits into
Draft
Conversation
Scope a theme to the v3 homepage via HomeThemeProvider/HomeThemeShell (applies `.dark` to a homepage wrapper, not <html>, so other routes are untouched) plus a floating ThemeToggle. Migrate the homepage blocks off hardcoded darks (text-white / text-gray-* / bg-sswCard / border-sswBorder) to theme tokens (text-foreground, text-muted-foreground, border-hairline), preserving the exact dark look with `dark:` variants. Media/hero surfaces (videoHero, heroBox, image-overlay cards, countdown, SSW-red badges, globe) stay always-dark by design. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
No linked issues found. Please add the corresponding issues in the pull request description. |
Contributor
Coverage report
Test suite run success13 tests passing in 1 suite. Report generated by 🧪jest coverage report action from b855e24 |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
…ht mode `bg-foreground/30` compiled to no CSS (Tailwind can't apply an opacity modifier to a plain var() colour), so inactive mobile-carousel dots were transparent — use `bg-foreground opacity-30` instead. Pin the always-dark HighlightCard arrow circle to `bg-white text-black` so it doesn't invert to a near-black circle on its photo in light mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Hoist HomeThemeProvider to the root layout so the header shares the theme, and scope a full-bleed themed bar to the homepage only (`ssw-home-nav`). Replace the floating toggle with a Figma-matching actions cluster (search, language globe, sun/moon toggle, divider, "Let's Talk" pill) injected via the menu's rightSideActionsOverride, and default the theme to the OS preference. Consumes SSW.MegaMenu#feat/v3-home-dark-light-mode as a temporary git dependency (swap for the published version once #146 lands). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ht-mode # Conflicts: # components/blocks/v3/logoCarousel/logoCarousel.tsx # components/server/MegaMenuWrapper.tsx
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
…reviews - Unify all homepage cards on the People-card look: white surface + hairline border in light mode, shadows removed (dark unchanged) - Match the hero scoop to the gray-50 section beneath it and flip the scoop arrows to black-on-light so they stay visible in light mode - Center the hero scoop and lay out the nav actions row properly on mobile; reclaim nav gutters in the 1280-1360 band so the Let's Talk pill never clips (pairs with the MegaMenu dark-logo easing) - Swap Newcastle/Sydney globe label offsets to match geography - Show split light/dark previews with both hex values in the Tina background colour picker - Pin ssw.megamenu to the latest theme branch commit Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
1 similar comment
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
…gamenu Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
…asset Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
…own theming Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
The homepage theme was resolved in a useEffect (after first paint), so the server-rendered dark default visibly flipped to the visitor's light theme on load. Resolve it before paint instead: - Co-located inline script inside each homepage theme scope sets `.dark` on its wrapper during HTML parsing, gated to `/`, so first paint already matches the resolved theme - Seed HomeThemeProvider's state from the same resolver (+ suppressHydrationWarning) so React's first client render agrees and never flips - Drive the last JS-`isDark` visuals from CSS so they resolve pre-paint too: nav bar bg/border via --home-nav-* vars, hero scoop via .home-scoop-fill, nav divider + sun/moon icon via `dark:` classes - Static toggle aria-label (avoids a suppressed-hydration stale label) - Delete the unused floating themeToggle Theme stays scoped to the homepage — non-home routes emit no scope, no script, no toggle. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
The textures keyed their gradient/filter ids off useId, whose tree-position value shifted once a sibling (the theme pre-paint script) was added before them, desyncing the server vs client render and throwing React #418 in prod. Derive the ids from the card index instead — deterministic across server and client. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
The inline pre-paint script runs (and mutates the DOM) before React hydrates, so React 19's production hydration flagged its contents as a mismatch and threw #418, regenerating the homepage subtree. Mark it suppressHydrationWarning so React skips re-validating it. Verified against a local production build: 0 console errors, theme still resolves before first paint. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4867.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
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
1 participant
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.
TL;DR
The v3 homepage was dark-only. This adds a light/dark toggle scoped to the homepage and migrates the homepage blocks off hardcoded dark colours (
text-white,text-gray-*,bg-sswCard,border-sswBorder) to theme tokens (text-foreground,text-muted-foreground,border-hairline) so light mode renders correctly — dark mode is byte-for-byte unchanged.How
HomeThemeProvider+HomeThemeShellapply.darkto a homepage-scoped wrapper (not<html>), so Tailwinddark:variants and the design-token CSS vars resolve from that ancestor.ThemeToggleflips/persists the choice (localStorage), defaulting to dark.dark:variants; only the light path is new.Reviewer notes
.darklives on a homepage wrapper only — other routes (including the always-.darkconsulting v2 pages that share these v3 blocks) are unaffected.Status
Draft — functionally complete and lint-clean; opening for a preview deploy + visual review.
🤖 Generated with Claude Code