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.20%. Comparing base (73f6304) to head (22bed7b).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7406      +/-   ##
==========================================
+ Coverage   82.18%   82.20%   +0.02%     
==========================================
  Files         339      339              
  Lines       51398    51442      +44     
==========================================
+ Hits        42241    42289      +48     
+ Misses       9157     9153       -4     

☔ 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.