✨ Add light/dark theming support to the mega menu#146
Open
joshbermanssw wants to merge 9 commits into
Open
Conversation
Drive the menu's colours from CSS-variable design tokens (foreground, background, muted-foreground, hairline) that mirror SSW.Website's styles.css, so the menu themes under a `.dark` scope with no `dark:` utilities. Swap the logo to the white-with-red dark-mode asset, mute + gap the nav chevrons, and tokenise the bar text/dividers. Adds a `prepare` build so the package can be consumed as a git dependency. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Point the dark logo at the consuming site's /images/ssw-logo-darkmode.svg (matches the footer) instead of the CDN URL. Show the tagline only at 2xl so the nav doesn't overflow at the xl breakpoint on the themed homepage. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Size both logos by their natural aspect (h-14 w-auto) instead of squeezing the wide dark 332×98 mark into a 100×60 box, so it no longer renders tiny. Make the mobile hamburger use the foreground token so it's visible (white) in dark mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…n homepage Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… match - Dropdown panel/sidebar/text get dark variants (only under .dark, so every non-home route stays byte-identical) - Light logo uses the recolored twin of the dark lockup SVG so the two themes share identical geometry Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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 SSW.Website homepage is getting a light/dark toggle, and the mega menu needs to theme with it. This drives the menu's colours from CSS-variable design tokens (mirroring
SSW.Website/styles.css) so it flips under a.darkscope with nodark:utilities.What changed
tailwind.config.jsmapsforeground/background/muted-foreground/hairlineto CSS vars +darkMode: "selector";lib/index.css/src/index.cssdefine the:root+.darkvalues.text-ssw-black/bg-gray-*.preparebuild — letsSSW.Websiteconsume this branch as a git dependency for preview deploys until it's published.Reviewer notes
:root, so consumers without a.darkscope render as before.Links
🤖 Generated with Claude Code