Align JSON and CodeEditor default theme with overall theme

[MarcSkovMadsen]

Closing #7394.

Looks like below

Default

Dark

Script

You can use the below to select the appropriate dark theme for the CodeEditor.

import panel as pn

pn.extension("codeeditor", sizing_mode="stretch_width")

ace_dark_themes = [
    "ambiance",
    "chaos",
    "clouds_midnight",
    "cobalt",
    "dracula",
    "gob",
    "gruvbox",
    "idle_fingers",
    "kr_theme",
    "merbivore",
    "merbivore_soft",
    "mono_industrial",
    "monokai",
    "pastel_on_dark",
    "solarized_dark",
    "terminal",
    "tomorrow_night",
    "tomorrow_night_blue",
    "tomorrow_night_bright",
    "tomorrow_night_eighties",
    "twilight",
    "vibrant_ink"
]

code="""
import panel as pn

pn.extension("codeeditor")

code_editor = pn.widgets.CodeEditor(value="abcd")

pn.template.FastListTemplate(
    sidebar=[code_editor.param.theme],
    main=[code_editor, pn.pane.JSON({"a": 1, "b": 2})]
).servable()
"""

pn.template.FastListTemplate(
    main=[pn.widgets.CodeEditor(value=code, language="python"), pn.pane.JSON({"a": 1, "b": 2}), *[pn.Column(theme, pn.widgets.CodeEditor(value=code, language="python", theme=theme)) for theme in ace_dark_themes]],
).servable()

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.23%. Comparing base (ced01e4) to head (feeb4fc).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7406   +/-   ##
=======================================
  Coverage   82.23%   82.23%           
=======================================
  Files         337      337           
  Lines       50557    50601   +44     
=======================================
+ Hits        41576    41614   +38     
- Misses       8981     8987    +6     

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

[MarcSkovMadsen]

When you review please consider it as a concept for theming that can be extended to matplotlib, Plotly and other components.

[MarcSkovMadsen]

Its probably also worth considering whether this should be handled in the frontend to enable saved apps to be able to handle themes. As a minimum the API should be something we could convert to a frontend implementation one day.