How to change font color in Sliders and TextInput titles?

Community Support
1

I’m trying to create a darkmode for a Simulator I created but can’t find a way to change the font color in Sliders and TextInput titles.

I know it could be done with css_classes but I tried and couldn’t make it work. Can anyone help me? I’m still a novice using Python and Bokeh.

Here is the link for the project:
https://shinlh.github.io/github_pages/wingg_exemplo_simulador_dark_v1

Thanks

2

You are going to have to add custom CSS stylesheets to your page, and for that you will need to use a template. Since you seem to be generating standalone output, you can use json_items or components to embed your Bokeh content in a simple page that has the extra CSS stylesheets at the top. You can use your browser to inspect the page elements to know what CSS selectors to style, or potentially you can set css_classes and add selectors that style based on those classes that you add.

3

Yes, I’m generating a standalone output. Is there a better option to it? I tried using css_classes in my python code, this is the code I added:

template = “”"
{% block postamble %}

.bk.custom { color: #FFFFFF; background: #FFFFFF; }

{% endblock %}
“”"

I also added this code to the Sliders and TextInputs widgets:

css_classes = [“custom”]

Can you point to where I’m making an error?

Thanks!

4

SOLVED: I made it work! Thanks, I’m not sure what the issue was but it’s working now with css_classes. There is another issue now with a white margin in the html that I don’t know how to change to black.

https://shinlh.github.io/github_pages/wingg_exemplo_simulador_dark_v1

I’d appreciate if you show me how to paint this area @Bryan.

Thanks!

5

@Shin_Huang I’m not sure I see the white margin you are talking about. Maybe you can annotate a screenshot?