Fasttemplate change colors

Panel
1

Using the Fasttemplate, is there a way to adjust colors?

My idea was to load a css file via

pn.extension(css_files = ['./css/css.css'])

which works fine for static css definitions, but not for overwriting the color variables from the template, e.g.,

:root {
    --accent-fill-hover: #ff0000 !important;
}

Both Firefox and Chrome discover the new definition, but render the colors as before the changes

grafik

As you can see on the right side, the background-color is “hard-coded” and I do not understand why, i.e., where it comes from.

1 Like
2

Hi @rbps1

I would really like to contribute a PR to change the colors it has been on my mind since I created the Fast Templates.

Would you create a Feature Request on Github? Try to describe your use case and requirements.

The Fast Template is built on the https://fast.design framework. If you take a look at the site you will realize that style is set by a special fast html element - not the css. I.e. you can tweak the look and feel by changing only the background, base and accent color.

There is a quite impressive tool on the site where you dynamically can change the look of their site via a few sliders.

Check it out :slight_smile:

1 Like
3

@Marc: https://github.com/holoviz/panel/issues/2175

1 Like
4

Hi,

Speaking about changing the colors in these FastTemplates (which are really great), there is one slight problem which concerns the background color of the area where options are shown in MultiChoice widgets. It is completely transparent which yields readability issues, as it is superimposed to the content above and below the widget.

I have looked into the css and it corresponds to background-color in .bk-root .choices__list--dropdown in fast_bokeh.css. I was able to change it—for instance setting it to the actual background color of this theme, i.e. #F7F7F7—in place from within the navigator. However, in my case changing the local file does not change anything when I reload my app.

Also, in contrast to the native theme, the item above which the mouse hovers is not highlighted, but that’s a more minor issue.

1 Like
5

@Theom. If you make a bug on GitHub with a minimum reproducible example, an image with clear marking of the problem I will try to fix.

Thanks.

1 Like
6

Alright thank you, here it is!

When using the default template I realized that the z-order is the main problem.

1 Like