A way to access the predefined style values via python

Widgets
,
1

I’m familiar with predefined styles (“info”, “success”, “danger”, etc.) supported by widgets such as Button, FloatProgress, etc.

Is there a way to set similar styles to custom widgets, i.e. built on top of HTML widget? This would allow me to freely develop widgets regardless of what kind of theme is currently set by jupyterlab.

2

An HTML can just include <style> tags. These get applied to the global scope, so it is encouraged to use class-based selectors for custom things, ideally with a prefix for your content, so as not to destroy the whole UI because of a bad selector, e.g. * {display: none}.

This can be coupled with the DOMWidget.add_class method, so one can even style stock Widgets (or their children), useful for overloading some of the generally sane defaults.

Note, though, that elements built within a raw HTML will not have very much reactivity available to them… there is ipyevents, which can get a bit further.

2 Likes
3

Thanks for the reply! Would it be considered a good option/practice to reuse, say, .jupyter-button.mod-success CSS class predefined for the Button widget for my own purposes?

4

As a notebook writer: sure! It’s your JupyterLab, and you can do whatever you want, as long as it doesn’t keep you from undoing it, and asking for help getting your files back.

As a library author: no, not without further namespacing, as blanket hijacking other people’s CSS is poor form.

So:

/* bad neighbor */
:root {
  --jp-ui-layout-color0: red;
}
.jupyter-button.mod-success {
  background-color: #chucknorris;
}

/* upstanding citizen */
.my-parent-box {
  --jp-ui-layout-color0: red;
}
.my-parent-box .jupyter-button.mod-success {  
  background-color: #chucknorris;
}
5

Thanks for the answer & the example! Will go the “upstanding citizen” route :+1: