Customise debugger appearance

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 (

For example

import panel as pn


CSS = """
button.debugger-card-header {
    background-color: pink !important

terminal_options = {
    "theme": {
        "background": '#fdf6e3'
debugger = pn.widgets.Debugger(stylesheets=[CSS])

pn.template.FastListTemplate(title="Debugger Styling", main=[debugger]).servable()

1 Like

Thank you very much, @Marc ! Looks a lot better.