Uh oh!
There was an error while loading. Please reload this page.
Retheme <DataInspector> to match Node.js util.inspect() colors - #1033
Conversation
🦋 Changeset detectedLatest commit: b0df9df The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests📦 Local Production (45 failed)nextjs-turbopack-canary (45 failed):
🐘 Local Postgres (45 failed)nextjs-turbopack-canary (45 failed):
🌍 Community Worlds (43 failed)mongodb (1 failed):
turso (42 failed):
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
❌ 📦 Local Production
❌ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
✅ 📋 Other
❌ Some E2E test jobs failed:
Check the workflow run for details. |
This stack of pull requests is managed by Graphite. Learn more about stacking. |
There was a problem hiding this comment.
Pull request overview
This PR rethemes the <DataInspector> component to align its color scheme with Node.js util.inspect() ANSI styling, replacing the previous Chrome DevTools-inspired colors. It also removes the unused color-hash dependency.
Changes:
- Redesigned color themes (light and dark) to match Node.js conventions (green strings, yellow numbers/booleans, grey undefined, magenta dates, cyan functions, neutral property names)
- Added extended theme context to support Date instance coloring, which react-inspector doesn't natively support
- Refactored theme structure to separate shared structural values from theme-specific colors
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/web-shared/src/components/ui/inspector-theme.ts | Implements new Node.js-inspired color schemes for light and dark themes, adds extended theme interface for Date colors |
| packages/web-shared/src/components/ui/data-inspector.tsx | Integrates extended theme context and adds custom Date rendering with magenta color styling |
| .changeset/legal-ads-shave.md | Documents the theme change in the changeset |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Uh oh!
There was an error while loading. Please reload this page.
2ed193c to
09faed9Compare7a0dc49 to
b1a1c05Compare
karthikscale3
left a comment
There was a problem hiding this comment.
looks good as most changes are only applying new styles and colors.
Replaces the Chrome DevTools color scheme with one inspired by Node.js util.inspect() ANSI stylizing: green strings, yellow numbers/booleans, grey undefined, magenta dates, cyan functions, and neutral property names. Adds an extended theme context to color Date instances (react-inspector has no built-in theme key for dates). Removes color-hash dependency which is no longer used.
bc74e97 to
b0df9dfCompare📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Next.js (Turbopack) | Express workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Next.js (Turbopack) | Express workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Next.js (Turbopack) | Express workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Express | Nitro Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Stream Benchmarks(includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
Merge activity
|
Uh oh!
There was an error while loading. Please reload this page.

Replaces the Chrome DevTools color scheme with one inspired by
Node.js util.inspect() ANSI stylizing: green strings, yellow
numbers/booleans, grey undefined, magenta dates, cyan functions,
and neutral property names. Adds an extended theme context to
color Date instances (react-inspector has no built-in theme key
for dates). Removes color-hash dependency which is no longer used.