3

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

TimoBe
  • 31
  • 1
  • 2

2 Answers2

2

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.

ac24
  • 5,325
  • 1
  • 16
  • 31
0

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;}")')
Ledadu
  • 111
  • 1
  • 4