CODEWITHSUNDEEP
pythonjupyter-notebookipywidgets
TimoBe
TimoBe

Reputation: 31

Python ipywidgets ToggleButton Style Color

I want to change the button color of a ipywidget ToggleButton. In the docs it is described as:

widgets.ToggleButtons(
    options=['Slow', 'Regular', 'Fast'],
    description='Speed:',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],
#   icons=['check'] * 3
)

The only way I can see is with button_style, which however has just the predefined options seen in the code. Is there a way to define such a preset on your own with custom button colors? I also tried styling it with CSS. button_color, description_color as well as background_color all did not work.

I cannot change the toggle button color to any other than the predefined color schemes ('success', 'info', 'warning', 'danger' or ''). Also jumping into the package, I did not find where they are defined. That is why I am not able to overwrite them.

Also, I am working in a Jupyter Notebook.

Kind regards, Timo

Upvotes: 3

Views: 4189

Answers (2)

Ledadu
Ledadu

Reputation: 111

You can use a CSS hack ^^

from IPython.display import Javascript
from google.colab.output import eval_js  

# Css hack
js = Javascript('''
    function addCss(style) {
      const div = document.createElement('style');

      div.innerHTML = style;
      document.body.appendChild(div);
    }
''')
display(js)
dummy = eval_js('addCss(".jupyter-widgets.jupyter-button.widget-toggle-button.mod-active { background-color: green;}")')

Upvotes: 0

ac24
ac24

Reputation: 5565

Widgets have a style attribute which might help you achieve what you want, read more here:

https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html#The-style-attribute

The attributes will vary by widget type. Unfortunately the keys option for ToggleButtons does not list button_color, so it does not look like the color can be modified this way.

Upvotes: 2

Related Questions