Skip to content

Add dark theme support for JSONEditor widget (#7441)#8444

Merged
philippjfr merged 2 commits intoholoviz:mainfrom
AtharvaJaiswal005:fix/jsoneditor-dark-theme-7441
Apr 8, 2026
Merged

Add dark theme support for JSONEditor widget (#7441)#8444
philippjfr merged 2 commits intoholoviz:mainfrom
AtharvaJaiswal005:fix/jsoneditor-dark-theme-7441

Conversation

@AtharvaJaiswal005
Copy link
Copy Markdown
Contributor

Summary

  • Override upstream jsoneditor@10.2.0 hardcoded CSS colors with Panel CSS custom properties (--panel-background-color, --panel-on-background-color, --panel-surface-color, etc.) so the JSONEditor widget adapts to both light and dark themes automatically
  • Covers: tree/text backgrounds, field and value text, value type syntax highlighting (string, number, boolean, null, url), menu bar, navigation bar, status bar, treepath breadcrumb, search box, highlight/selection states, context menus, popovers/tooltips, autocomplete dropdown, modal dialogs (sort, transform), form inputs, validation errors, empty placeholders, and "show more" indicators

Changes

  • panel/models/jsoneditor.ts - Import and push the new theme-adaptive stylesheet into the shadow DOM
  • panel/styles/models/jsoneditor.less - New 269-line LESS file that maps all jsoneditor hardcoded colors to Panel CSS variables with light-theme fallback defaults

How it works

The LESS file uses var(--panel-background-color, #ffffff) style rules that:

  • Fall back to the original light-theme defaults when no variables are set
  • Automatically pick up dark-theme values (--panel-background-color: #212529, etc.) when Panel runs with a dark template/theme
  • No JavaScript changes needed - pure CSS variable inheritance through the shadow DOM

Test plan

  • Run panel serve with FastListTemplate(theme="dark") and verify JSONEditor has dark background, white text, themed menus
  • Switch to theme="default" and verify light theme still looks correct (no regression)
  • Test tree mode, text mode, and form mode
  • Right-click context menu should have themed background/text
  • Search box, navigation bar, status bar should match theme
  • Existing panel/tests/ui/widgets/test_jsoneditor.py tests should pass

Closes #7441
image

Override upstream jsoneditor CSS with Panel CSS variables so the
widget adapts to both light and dark themes automatically. Covers
background, text, value type syntax highlighting (string, number,
boolean, null), menu bar, context menus, modals, autocomplete,
validation errors, popovers, search inputs, navigation bar, status
bar, treepath, and empty field placeholders.
@codecov
Copy link
Copy Markdown

codecov bot commented Feb 25, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.05%. Comparing base (9c86ad7) to head (f88e5ea).
⚠️ Report is 29 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8444      +/-   ##
==========================================
- Coverage   86.16%   86.05%   -0.11%     
==========================================
  Files         349      349              
  Lines       55184    55184              
==========================================
- Hits        47548    47489      -59     
- Misses       7636     7695      +59     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@philippjfr philippjfr merged commit 057c234 into holoviz:main Apr 8, 2026
16 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support dark theme for JSONEditor

2 participants