feat(framework-editor): dark mode (FRAME-5)#3128
Open
tofikwest wants to merge 2 commits into
Open
Conversation
The editor inherited @trycompai/ui's `.dark` token block, whose values are identical to light — so there was no dark theme and no way to switch. - Add next-themes ThemeProvider (class strategy, system-aware, default light). - Add a Sun/Moon toggle in the header. - Define a real dark palette in the editor's globals (overrides the library's placeholder `.dark` tokens), scoped to framework-editor only. Closes FRAME-5 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
cubic analysis
No issues found across 8 files
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Linked issue analysis
Linked issue: FRAME-5: Framework Editor - Theme options - Dark mode please
| Status | Acceptance criteria | Notes |
|---|---|---|
| ✅ | Add a theme toggle UI in the header that switches theme | HeaderFrameworks.tsx adds and theme-toggle.tsx implements a button that calls setTheme to toggle between light/dark. |
| ✅ | Integrate next-themes provider with class attribute, default light, and system-aware behavior; avoid hydration mismatch on | layout.tsx wraps app with ThemeProvider configured (attribute="class", defaultTheme="light", enableSystem) and adds suppressHydrationWarning on ; theme-provider.tsx forwards to next-themes. |
| ✅ | Provide a real dark palette that overrides the library's placeholder .dark tokens scoped to the Framework Editor | globals.css declares a .dark token block after importing @trycompai/ui so it wins the cascade and is scoped to this app. |
| ✅ | Avoid SSR hydration mismatch for theme-specific UI (mount guard) | theme-toggle.tsx uses useEffect to set a mounted flag and only treats resolvedTheme as reliable after mount to prevent hydration mismatch. |
| ✅ | Add tests covering theme toggle behavior (light→dark and dark→light) | theme-toggle.test.tsx includes two tests that mock useTheme and assert setTheme called with 'dark' or 'light' on click. |
Contributor
Author
|
@cubic-dev-ai review it |
Contributor
@tofikwest I have started the AI code review. It will take a few minutes to complete. |
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.
What
Adds a working dark mode + theme toggle to the Framework Editor.
Why (FRAME-5)
Joe asked to "replicate what you've got in the app" for less eyestrain.
Important finding: it wasn't actually a quick wire-up. The main app gets its dark tokens from
@trycompai/design-system, but the Framework Editor uses@trycompai/ui, whose.darktoken block is identical to light (--background: 0 0% 100%in both). So just toggling adarkclass changed nothing — a real dark palette was needed.Changes
next-themesprovider (attribute="class", system-aware, default light) wrapping the app;suppressHydrationWarningon<html>.theme-toggle.tsx) — mount-guarded to avoid hydration mismatch.styles/globals.css, declared after the@trycompai/uiimport so it overrides the library's placeholder.darktokens. Scoped to framework-editor only — does not touch@trycompai/uior other apps.next-themesadded topackage.json(+1 line inbun.lock).I can't verify dark rendering headlessly. Please click through in dark mode. Known spots that may need follow-up polish (a handful of hardcoded colors that don't read from tokens):
bg-gray-200,text-gray-700)bg-green-100/bg-red-100)text-[#606060])These degrade rather than break; happy to do a token-cleanup pass if you want them perfect.
Testing
theme-toggle.test.tsx: 2 tests (light → dark, dark → light).turbo typecheck --filter=@trycompai/framework-editor: clean.🤖 Generated with Claude Code
Summary by cubic
Adds system-aware dark mode and a header theme toggle to the Framework Editor. Fulfills FRAME-5 by matching the main app’s theme options and providing a real dark palette for reduced eyestrain.
New Features
next-themesprovider (class strategy, system-aware, default light);<html>uses suppressHydrationWarning.styles/globals.css, overriding@trycompai/ui’s.darktokens and scoped to the editor.Dependencies
next-themestoapps/framework-editor/package.json.Written for commit e77c0eb. Summary will update on new commits.