Search code examples
cssthemesjupyter-lab

Micro level changes to Jupyter Lab theme


I know I can change the theme in Jupyter Lab to make it light or dark. And that I can change the background color of a single cell. But I want to make some further micro level changes to the overall theme, such as:

  • Change the default background color of a code cell
  • Remove the gray border around the cell
  • The blue line number should be gray
  • Finally change the blue bar on the left of the currently selected cell to something other than blue.

enter image description here

Most of the solutions I've seen pertain to Jupyter Notebook.


Solution

  • You can use a custom.css file which is available since JupyterLab 4.2. It requires starting jupyterlab with --custom-css flag. This is documented in the User Guide under Applying Custom CSS.

    If you do not know CSS, you may have some luck with jupyterlab-theme-editor (for screenshots see this post on the Jupyter blog).

    In principle for anything production-ready you would want to create a new theme inheriting from an existing theme. I think jupyterlab-theme-editor can help you to get started but otherwise I would recommend looking though the JupyterLab extension documentation, especially theme plugins and CSS sections.