Add dark theme support for JSONEditor widget (#7441)#8444
Merged
philippjfr merged 2 commits intoholoviz:mainfrom Apr 8, 2026
Merged
Add dark theme support for JSONEditor widget (#7441)#8444philippjfr merged 2 commits intoholoviz:mainfrom
philippjfr merged 2 commits intoholoviz:mainfrom
Conversation
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 Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
philippjfr
approved these changes
Apr 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
jsoneditor@10.2.0hardcoded 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 automaticallyChanges
panel/models/jsoneditor.ts- Import and push the new theme-adaptive stylesheet into the shadow DOMpanel/styles/models/jsoneditor.less- New 269-line LESS file that maps all jsoneditor hardcoded colors to Panel CSS variables with light-theme fallback defaultsHow it works
The LESS file uses
var(--panel-background-color, #ffffff)style rules that:--panel-background-color: #212529, etc.) when Panel runs with a dark template/themeTest plan
panel servewithFastListTemplate(theme="dark")and verify JSONEditor has dark background, white text, themed menustheme="default"and verify light theme still looks correct (no regression)panel/tests/ui/widgets/test_jsoneditor.pytests should passCloses #7441
