fix: improve light theme code block variable contrast

[Ibochkarev]

🔗 Linked issue

Fixes #2217

📚 Description

On the light theme, Material Theme Lighter paints variables and comments the same gray (#90A4AE), so names like data and signal look muted on docs pages.

I added a small patched theme that keeps comments muted and darkens other #90A4AE tokens (plus default foreground) to #455A64, then wired it in for content highlighting and the MDC parser. Dark theme stays material-theme-palenight.

[vercel]

@Ibochkarev is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Review limit reached

@Ibochkarev, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 58 minutes

Limit details: You’ve used all 2 included reviews currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b711261d-ac48-4990-bb4b-79d14b1371db

📥 Commits

Reviewing files that changed from the base of the PR and between aff48e9 and 7c64877.

📒 Files selected for processing (1)

• nuxt.config.ts

📝 Walkthrough

Walkthrough

Adds a local material-theme-lighter-contrast theme derived from Material Theme Lighter. The theme changes the editor foreground and selected muted token colors while excluding comments and docstrings. The Markdown parser and Nuxt configuration now use the custom theme for light and default highlighting. The Palenight dark theme remains unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: improving variable contrast in light-theme code blocks.
Description check	✅ Passed	The description directly explains the contrast issue, the patched theme, and the affected light and dark theme configurations.
Linked Issues check	✅ Passed	The changes address issue #2217 by increasing light-theme variable contrast while keeping comments muted.
Out of Scope Changes check	✅ Passed	All changes support the linked issue by defining and applying the patched light syntax-highlighting theme.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

themes/material-theme-lighter-contrast.mjs (1)

12-26: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add regression coverage for comment and docstring preservation.

Test default, variable, comment, and docstring token scopes. This protects the contrast rule from changing comment colors in future theme updates.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/material-theme-lighter-contrast.mjs` around lines 12 - 26, Add
regression tests for patchTokenColors covering default, variable, comment, and
docstring token scopes. Verify that the contrast transformation preserves
comment and docstring colors while applying the expected foreground adjustment
only to eligible non-comment tokens.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@themes/material-theme-lighter-contrast.mjs`:
- Around line 12-26: Add regression tests for patchTokenColors covering default,
variable, comment, and docstring token scopes. Verify that the contrast
transformation preserves comment and docstring colors while applying the
expected foreground adjustment only to eligible non-comment tokens.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 685db608-184c-4be9-bd5c-cd6819fe31a1

📥 Commits

Reviewing files that changed from the base of the PR and between 29e59bb and aff48e9.

📒 Files selected for processing (3)

• helpers/mdc-parser.mjs
• nuxt.config.ts
• themes/material-theme-lighter-contrast.mjs

[nuxt-com-bundle-report]

Production bundle

Comparing 07b36366 with 7c648779. Compressed sizes are calculated from the emitted production assets.

Metric	Base (Brotli)	PR (Brotli)	Δ Brotli	Δ gzip
Client JavaScript	2.49 MiB	2.50 MiB	+5.0 KiB (+0.2%)	+6.2 KiB (+0.2%)
Client CSS	30.1 KiB	30.1 KiB	—	—
Other client assets	339.3 KiB	339.3 KiB	-4 B (-0.0%)	+2 B (+0.0%)
Total client assets	2.85 MiB	2.86 MiB	+5.0 KiB (+0.2%)	+6.2 KiB (+0.2%)

Largest module increases

Module	Base (Brotli)	PR (Brotli)	Δ Brotli
virtual:nuxt:node_modules%2F.cache%2Fnuxt%2F.nuxt%2Fmdc-highlighter.mjs	1.9 KiB	4.6 KiB	+2.6 KiB (+138.7%)
virtual:nuxt:node_modules%2F.cache%2Fnuxt%2F.nuxt%2Fmdc-imports.mjs	174 B	2.8 KiB	+2.6 KiB (+1535.1%)
/app/pages/docs/async-data-chunk-7.js	0 B	180 B	+180 B
/app/pages/blog/async-data-chunk-2.js	0 B	169 B	+169 B
/app/pages/docs/async-data-chunk-6.js	0 B	168 B	+168 B
/app/pages/docs/[version]/errors/async-data-chunk-0.js	0 B	152 B	+152 B
/app/pages/deploy/async-data-chunk-5.js	0 B	134 B	+134 B
/app/pages/enterprise/agencies/async-data-chunk-10.js	0 B	129 B	+129 B
/app/pages/deploy/async-data-chunk-4.js	0 B	119 B	+119 B
/app/pages/blog/async-data-chunk-3.js	0 B	114 B	+114 B

Module values come from Nuxt’s analyzer and are attribution estimates. This workflow is currently report-only.

Workflow run

[atinux]

@benjamincanac would love to have your POV on it