Modify Jupyter Lab UI

Hello,
I want to modify my Jupyter Lab UI to ease managing and improve user experience, like buttons, themes, and default theme settings for all users.

How can I do that?

My current Jupyter Lab UI

The expected UI I want

The top of the research chain for this would be the official docs which would lead the reader to the extension cookiecutter.

Under the hood, many style aspects are controlled by CSS variables, which the theme is on the hook to provide all of them. This could do 80% of what’s in the screenshot.

Replacing icons (for except kernels) at runtime can be achieved by importing the LabIcon instance that defines it, and changing its svgstr to suit. This will update every rendered instance.

The specific case of the main menu being flush to the side of the sidebar area would be something of a challenge, as it would have to fight a lot with the PanelLayout. This might require implementing a whole custom Shell. This would also make the menu move a lot, visually, when the sidebar was opened or closed, or partially obscure it, which is probably worse. A more stable position might be to move the main menu to the sidebar, stacking the menu items vertically, or hiding them entirely.

3 Likes

Thanks for your comment.

So turns out, I just need to modify the CSS file in folder /usr/local/share/jupyter/lab/themes.

Everything is good so far.

ibm quantum lab is a nice product!!! :star_struck: