Replace Vitesse theme with GitHub theme for code syntax highlighting#3470
Replace Vitesse theme with GitHub theme for code syntax highlighting#3470oatsandsugar wants to merge 2 commits intomainfrom
Conversation
Switch from vitesse-light/dark to github-light/dark themes for code syntax highlighting. The GitHub themes have better contrast and readability, especially for CLI reference documentation. Fixes 514-381 https://claude.ai/code/session_01FWvktwYbRxyMJtBP5S48US
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary by CodeRabbit
WalkthroughUpdated syntax-highlighting theme names from "vitesse-light"/"vitesse-dark" to "github-light"/"github-dark" across multiple MDX and UI code editor/block components; no logic, control flow, or public API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (5)
🧰 Additional context used📓 Path-based instructions (3)**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
apps/framework-docs-v2/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (apps/framework-docs-v2/CLAUDE.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (6)📚 Learning: 2026-02-07T03:51:52.784ZApplied to files:
📚 Learning: 2026-02-07T03:51:57.720ZApplied to files:
📚 Learning: 2026-01-22T19:02:52.316ZApplied to files:
📚 Learning: 2026-01-08T18:32:03.114ZApplied to files:
📚 Learning: 2026-01-22T19:02:52.316ZApplied to files:
📚 Learning: 2026-01-22T19:02:52.316ZApplied to files:
🪛 ast-grep (0.40.5)apps/framework-docs-v2/src/components/mdx/shell-snippet.tsx[warning] 88-88: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks. (react-unsafe-html-injection) 🔇 Additional comments (6)
✏️ Tip: You can disable this entire section by setting 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 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/framework-docs-v2/src/components/mdx/code-snippet.tsx`:
- Around line 406-411: Remove the redundant themes prop passed to the
CodeBlockContent component in
apps/framework-docs-v2/src/components/mdx/code-snippet.tsx: the CodeBlockContent
(see usage of CodeBlockContent) already defaults to "github-light"/"github-dark"
in code-block/index.tsx, so delete the themes={{ light: "github-light", dark:
"github-dark" }} prop to avoid duplicated configuration and a second place to
update in the future.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
apps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsxapps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Run linting checks before submitting PRs for TypeScript/JavaScript code
**/*.{ts,tsx,js,jsx}: Group imports by external dependencies, internal modules, and types; use named exports from barrel files (index.ts)
Use camelCase for variables and functions, PascalCase for types/classes/components, UPPER_SNAKE_CASE for constants in TypeScript/JavaScript
Prefix unused variables with underscore (e.g.,_unusedParam) to bypass linting errors in TypeScript/JavaScript
Format TypeScript/JavaScript code with Prettier usingexperimentalTernaries: true; auto-formats on commit via Husky + lint-staged
Files:
apps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsxapps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsx
apps/framework-docs-v2/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/framework-docs-v2/CLAUDE.md)
Component library must use shadcn/ui components located in
src/components/ui/
Files:
apps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsxapps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer interfaces for objects, types for unions/intersections in TypeScript; explicit return types on public APIs
Files:
apps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsxapps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsx
🧠 Learnings (6)
📚 Learning: 2026-01-22T19:02:52.316Z
Learnt from: CR
Repo: 514-labs/moosestack PR: 0
File: apps/framework-docs-v2/CLAUDE.md:0-0
Timestamp: 2026-01-22T19:02:52.316Z
Learning: Applies to apps/framework-docs-v2/src/**/*.{ts,tsx} : Component library must use shadcn/ui components located in `src/components/ui/`
Applied to files:
apps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsx
📚 Learning: 2026-01-08T18:32:03.114Z
Learnt from: DatGuyJonathan
Repo: 514-labs/moosestack PR: 3170
File: apps/framework-docs-v2/src/components/copy-page-button.tsx:36-38
Timestamp: 2026-01-08T18:32:03.114Z
Learning: Enforce the following multiline ternary formatting for conditional JSX without parentheses: place the condition and the '?' on the first line, place the true branch on the next indented line, and place the ':' plus the false branch on the third line. This pattern is commonly used for copy/check icon toggles in the moosestack repository (apps/framework-docs-v2). Apply this style to all TSX files under apps/framework-docs-v2/src/**/*.tsx to ensure consistency and readability.
Applied to files:
apps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsxapps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsx
📚 Learning: 2026-02-07T03:51:57.720Z
Learnt from: okane16
Repo: 514-labs/moosestack PR: 3465
File: apps/framework-docs-v2/src/components/mdx-renderer.tsx:91-96
Timestamp: 2026-02-07T03:51:57.720Z
Learning: In apps/framework-docs-v2/src/components/mdx-renderer.tsx, the Object.assign pattern for creating component wrappers with subcomponents (e.g., `GuideStepperWithSubcomponents = Object.assign(GuideStepper, { Step, Checkpoint, AtAGlance, Prompt })`) is required for MDX prerendering to resolve dotted component access like `GuideStepper.AtAGlance`, even when the source component export already has subcomponents attached. Removing these wrappers causes build failures during prerender.
Applied to files:
apps/framework-docs-v2/src/components/mdx-renderer.tsx
📚 Learning: 2026-02-07T03:51:52.784Z
Learnt from: okane16
Repo: 514-labs/moosestack PR: 3465
File: apps/framework-docs-v2/src/components/mdx/interactive/vertical-progress-steps.tsx:32-41
Timestamp: 2026-02-07T03:51:52.784Z
Learning: In apps/framework-docs-v2/src/components/mdx/interactive/vertical-progress-steps.tsx and similar MDX components: Retain runtime normalization helpers like getProgressStepsVariant even when props are typed, because MDX-authored content can pass arbitrary strings at runtime that bypass TypeScript type checking. These helpers provide safe fallbacks for unsupported values.
Applied to files:
apps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsx
📚 Learning: 2026-01-22T19:02:52.316Z
Learnt from: CR
Repo: 514-labs/moosestack PR: 0
File: apps/framework-docs-v2/CLAUDE.md:0-0
Timestamp: 2026-01-22T19:02:52.316Z
Learning: Applies to apps/framework-docs-v2/content/**/*.mdx : TypeScript code snippets in documentation should be validated for syntax with brace matching; Python snippets should be validated for indentation
Applied to files:
apps/framework-docs-v2/src/components/mdx-renderer.tsxapps/framework-docs-v2/src/components/mdx/code-snippet.tsx
📚 Learning: 2026-01-22T19:02:52.316Z
Learnt from: CR
Repo: 514-labs/moosestack PR: 0
File: apps/framework-docs-v2/CLAUDE.md:0-0
Timestamp: 2026-01-22T19:02:52.316Z
Learning: Applies to apps/framework-docs-v2/content/**/*.mdx : Validate code snippets in documentation with the `test` directive for TypeScript and Python code blocks
Applied to files:
apps/framework-docs-v2/src/components/mdx/code-snippet.tsx
🔇 Additional comments (4)
apps/framework-docs-v2/src/components/mdx-renderer.tsx (1)
202-203: LGTM. Correct theme names for shiki/rehype-pretty-code. Consistent with the other two files.apps/framework-docs-v2/src/components/ui/shadcn-io/code-block/index.tsx (1)
577-578: LGTM. Default themes updated consistently.apps/framework-docs-v2/src/components/mdx/code-snippet.tsx (2)
213-214: LGTM. Theme strings updated for the primary shiki highlight path.
243-244: LGTM. Fallback path themes consistent with primary path.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| : <CodeBlockContent | ||
| language={item.language as any} | ||
| themes={{ | ||
| light: "vitesse-light", | ||
| dark: "vitesse-dark", | ||
| light: "github-light", | ||
| dark: "github-dark", | ||
| }} |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Redundant explicit themes — CodeBlockContent already defaults to github-light/github-dark.
Since the default was updated in code-block/index.tsx, this explicit themes prop can be removed. Keeping it means two places to update if the theme changes again.
Suggested diff
: <CodeBlockContent
language={item.language as any}
- themes={{
- light: "github-light",
- dark: "github-dark",
- }}
syntaxHighlighting={true}
>🤖 Prompt for AI Agents
In `@apps/framework-docs-v2/src/components/mdx/code-snippet.tsx` around lines 406
- 411, Remove the redundant themes prop passed to the CodeBlockContent component
in apps/framework-docs-v2/src/components/mdx/code-snippet.tsx: the
CodeBlockContent (see usage of CodeBlockContent) already defaults to
"github-light"/"github-dark" in code-block/index.tsx, so delete the themes={{
light: "github-light", dark: "github-dark" }} prop to avoid duplicated
configuration and a second place to update in the future.
Replaces vitesse-light/vitesse-dark with github-light/github-dark in the 5 files missed by the initial migration. Adds dark mode CSS variable selectors to shell-snippet.tsx so shiki dual-theme output switches correctly. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2 participants
Summary
Completes the migration of syntax highlighting themes from Vitesse to GitHub across all documentation components.
Why GitHub over Vitesse?
moose refresh) hard to read. GitHub Dark has stronger contrast for terminal and code blocks.--shiki-dark,--shiki-dark-bg) to switch between light/dark. Some components (shell-snippet.tsx) were missing the dark mode CSS selectors needed to activate these variables — this PR adds them.Changes
Theme replacement (8 files)
All
vitesse-light/vitesse-darkreferences replaced withgithub-light/github-dark:mdx-renderer.tsxrehypePrettyCodeconfigcode-snippet.tsxHighlightedCodeBlockContentcode-block/index.tsxCodeBlockContentcode-block/server.tsxCodeBlockContentinline-code.tsxInlineCode`code{:lang}`syntaxcode-editor/index.tsxCodeEditorcode-editor-wrapper.tsxCodeEditorWrapperCodeEditorshell-snippet.tsxShellSnippetDark mode fix for
shell-snippet.tsxAdded
cn()utility and dark mode CSS variable selectors to the wrapper div so Shiki's dual-theme output switches correctly in dark mode:This matches the existing pattern used in
code-block/index.tsxandinline-code.tsx.Testing
Verified in both light and dark mode:
pnpm buildcompletes without errors