Customise debugger appearance

Panel
1

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”})

1 Like
2

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()

image
image1106×1221 11.8 KB

2 Likes
3

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

4

Hi @Marc ,
I needed this today, thank you!
What you’ve suggested here worked for me, except that the font color in the terminal is white.
How can I change the font color for the terminal content?
Also I’s like to change the border color for header, I’ve tried several random keywords but no luck.
Where can I see the list of parameters that I can set/change both for header and content?
Thanks in advance.

update: Adding “border: white !important;” to CSS will change the border color of header.

1 Like