Setting appropriate colors for dark theme seems not to be possible

[farmborst]

710

Proposal: A base WidgetStyle class which is a widget like Layout, specialized for each widget type exposing higher level abstractions than css. For the SliderStyle object:

handle color slider color readout color we could limit this to colors at first...

Does not seem to work yet (ipywidgets.version = 7.0.0). I can only set the handle color. As I am working with a dark background style the default black readout color is very annoying... Or am I doing something wrong:

layout = {'width':'90%', 'height': '80px', 'border': 'solid', 'fontcolor':'red'}
style = {'handle_color': 'red', 'readout_color': 'red', 'slider_color': 'red'}
slides = widgets.interactive(lambda m, f: run(axes, lines, q, p, E, m, twopi*f, dt),
                            f=FloatSlider(min=1, max=100, step=1, continuous_update=False, layout=layout, style=style),
                            m=FloatSlider(min=1, max=100, step=1, continuous_update=False, layout=layout, style=style))

[jasongrout]

Handle color and description width is the only thing implemented right now for the slider. We thought we'd start conservative.

The description labels and all of the other text probably gives you issues too, right? If you have a dark background, it may be better to change the text color across all of ipywidgets (as part of a theme change), rather than just on a single widget.

[farmborst]

The description labels are already white. Only the readout labels are black. What do you mean by changing the text color across all of ipywidgets? Why do ipywidgets not respect my global ipython theme textcolor?

[jasongrout]

I'm not familiar with a theming system for the notebook. How did you set a "global ipython theme textcolor"?

[jasongrout]

(There is official support for themes in JupyterLab, which ipywidgets should respect, but as far as I know, there is no official support for themes in the classic notebook.)

[farmborst]

Sorry, I was not clear. I am using jupyterthemes with monokai. As mentioned the description labels respect the themes while the readout labels do not.

import jupyter
import jupyterthemes
print(jupyter.__version__)
print(jupyterthemes.__version__)
> 1.0.0
> 0.17.8

[jasongrout]

Ah, I don't know anything about jupyterthemes. I think the description labels respecting the theme colors may be a happy accident. Can you go into the Chrome debugger and determine what extra css is being applied to the description labels that is not being applied to the readout labels?

[farmborst]

The description label is getting its color from custom.css line 1802:

div.widget-label {
 text-align: -webkit-auto !important;
 margin-left: 15px !important;
 max-width: 240px !important;
 min-width: 100px !important;
 vertical-align: text-top !important;
 color: #cccccc !important;
 font-size: 14px;
}

both are ignoring from custom.css:

div#notebook {
 font-family: sans-serif;
 font-size: 13pt;
 line-height: 170%;
 color: #f8f8f0;
 -webkit-font-smoothing: antialiased !important;
}
body,
div.body {
 font-family: sans-serif;
 font-size: 13pt;
 color: #f8f8f0;
 background-color: #1e1e1e;
 background: #1e1e1e;
 -webkit-font-smoothing: antialiased !important;
}

[jasongrout]

It looks like the theme explicitly sets the color of the widget label with the div.widget-label { css. It looks like it is the theme's job to also set the readout color explicitly. The widget readout has the widget-readout css class: https://github.com/jupyter-widgets/ipywidgets/blob/34091c58f5f21a947503031d48f623a23fa58b86/packages/controls/src/widget_int.ts#L119

[jasongrout]

(Note that these class names are not considered a part of our stable public API, so an upgrade to ipywidgets may change the class names)

[dayfine]

Encountered un-usable widgets in dark theme...what should I do? https://prnt.sc/szrmqd

[vidartf]

@dayfine Which front end are you using?

[dayfine]

@dayfine Which front end are you using?

Google Colab

[jasongrout]

what should I do?

If you're using Colab, then opening an issue in the colab support channels would probably be the best thing to do.

CC @blois

[sruthiiyer]

Can we set color for the slider line also like we can do for handle color?

[vks2005]

A simple fix for all those using dark themes on jupyter notebook is to use following code. Just copy the code given below into a new cell and run it before the cells that create ipywidgets in your notebook.

`%%html

`

[tinoproductions]

A simple fix for all those using dark themes on jupyter notebook is to use following code. Just copy the code given below into a new cell and run it before the cells that create ipywidgets in your notebook.

`%%html

`

Thank you so much. This worked a charm

[lvwarren]

`%%html

`

leaving the backquotes out and putting the on a new line in a code cell worked for me

[mkolodny]

I was having this issue in Colab, and running the following code in a cell solved it for me:

# Set the tqdm text color to white.

from IPython.display import HTML, display

def set_css_in_cell_output():
    display(HTML('''
        <style>
            .jupyter-widgets {color: #d5d5d5 !important;}
            .widget-label {color: #d5d5d5 !important;}
        </style>
    '''))

get_ipython().events.register('pre_run_cell', set_css_in_cell_output)

(Inspired by this StackOverflow answer)

[troelstk]

Experienced a similar problem using seaborn plots inside an widgets.Output() widget, where the area around the actual plot was greyed out. Solved it by running below code in a new cell first

%%html
<style>
.box_style{
    width:40%;
    border : 2px solid white;
    height: auto;
    background-color:white;
}
</style>

And setting the style for each box with a plot in it:

fig, ax = plt.subplots(figsize=(10, 10))
output = widgets.Output()
with output:
    ax.plot(x, y)
plot_widget = widgets.Box([output]) 
plot_widget.add_class("box_style")