Is there any way to customise debugger appearance? The default black background doesn’t look very suitable for my app. I tried passing styles argument, but it doesn’t seem to have any effect.
pn.widgets.Debugger(styles={“background”: “white”})
Hi @contango
styles only style the outer container of the component. The Debugger component is really a composed component. The sub components you would like to style is its .terminal component and the button.
You can style a Terminal via its options parameter. You can specify options in ITerminalOptions (xtermjs.org).
For example
import panel as pn
pn.extension("terminal")
CSS = """
button.debugger-card-header {
background-color: pink !important
}
"""
terminal_options = {
"theme": {
"background": '#fdf6e3'
}
}
debugger = pn.widgets.Debugger(stylesheets=[CSS])
debugger.terminal.options=terminal_options
pn.template.FastListTemplate(title="Debugger Styling", main=[debugger]).servable()
1 Like