Updating RadioButtonGroup colors using FastListTemplate

Panel
1

I am looking for a way to change the color of the selected value in the RadioButtonGroup while using the FastListTemplate - I don’t need it to be dynamic, just something distinguishable, since the defaults are indecipherable.

In the following image “Seattle” is selected, but the colors are so similar it’s extremely easy to miss:
image

The hover colors are slightly better (San Francisco is hovered in this one):
image

I’d like to use #BBECEA as the highlight color when something is selected, but I can’t figure out what css class to adjust to do this. I’ve already added an accent color, which updates other widgets, but not RadioButtonGroups.

1 Like
2

I don’t know if this is the best way - but I can get it to work with this:

import panel as pn
css = """
<style>
.bk-root .bk-btn-default.bk-active, .bk-root .bk-btn-default:active {
    background-color: #BBECEA;
}
</style>
"""
widget = pn.widgets.ToggleGroup(options=[*"ABCD"])
A = pn.template.FastListTemplate(main=[pn.Row(widget, css)]).servable()

image

Edit: This is properly a better way

import panel as pn
from panel.template.base import _base_config
css = """
.bk-root .bk-btn-default.bk-active, .bk-root .bk-btn-default:active {
    background-color: #BBECEA;
}
"""
config = _base_config(raw_css=[css])

widget = pn.widgets.ToggleGroup(options=[*"ABCD"])
A = pn.template.FastListTemplate(main=widget, config=config).servable()
3

Hi @laurajludwig

You can also try changing the button_type to for example success.

import panel as pn

ACCENT_COLOR = "#0072B5"

widget = pn.widgets.ToggleGroup(value=["C"], options=[*"ABCD"], button_type="success")

pn.template.FastListTemplate(
    main=[widget], accent_base_color=ACCENT_COLOR, header_background=ACCENT_COLOR
).servable()

image
image823×429 10.7 KB

3 Likes
4

Just for info. The Panel button_type is really a concept coming from Bokeh and again from the Bootstrap design framework. The Fast templates are based on the Fast design framework which does not have the concept of a button_type. Instead it has an accent.

So the Panel button_type is translated to an accent when using the Fast templates. Unfortunately the default Fast button type does not work well when used in a toogle, check and radio groups.

Check out FAST Button

image
image1374×653 41.8 KB

For a deep dive into the Fast templates check out FastGridTemplate Deep Dive - YouTube

2 Likes
5

Both options here worked. Since I have quite a few of these toggle groups, I’m going to go with the css version, since it universally applies the formatting without needing to update each widget type.

@Marc, thanks for the reference to the Youtube video about the FastListTemplate - I saw in other comments that this template uses accent instead of button_type, and I couldn’t figure out how to make the leap to applying it in my situation. I’ll watch through the video for some more insight!

1 Like