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.
2ed193c to
09faed9
Compare
7a0dc49 to
b1a1c05
Compare
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
b0df9df
Compare
📊 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
|

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.