How to edit jupyter lab theme

Question

As described in a previous question, it is now possible to edit the Jupyter Lab theme. However, this theme has a few issues for me personally. For example, it makes plot axes hard to read, since their default color is black. Other users have had similar problems. Consequently, I would like to fork the existing theme and make plot display cells a light grey colour. How does one do this?

I tried to find the corresponding .css file, but all I could find was /usr/local/share/jupyter/lab/themes/@jupyterlab/theme-dark-extension/. I understand that I could edit the index.css to achieve what I want, but how do I instead fork that theme and edit it? How do I let Jupyter Lab know about my custom theme?

I came across your question and the one you linked when I encountered the same issue regarding the Dark Theme and plot axes. As my question would have been a subset of your I decide to offer a bounty here. Did you get any further to altering the background colour of the Jupyter Lab Dark Theme? — Jason, Jun 30 '18 at 11:11

score 2 · Answer 1 · answered Jun 28 '18 at 07:51

2

First fork the Jupyter Lab project, then edit and commit your changes.
Second, go to Jupyter Lab project and ask pull request.
if they like your project they will accept and put your changes on their master branch

answered Jun 28 '18 at 07:51

Payam Khaninejad

7,692
6
45
55

I like open source too, but I have really weird changes I want to make which aren't appropriate for most users. – Seanny123 Jun 28 '18 at 14:45
You won’t know until you try – Payam Khaninejad Jun 28 '18 at 14:47
@PayamKhaninejad Can you add some detail to your first point? For example which file(s) need to be edited to control various parts of the Jupyter Lab interface such as the background colour. – Jason Jun 30 '18 at 08:41
@Bprodz sorry I am not familiar with the concept I just prefer a way to solve this situation. – Payam Khaninejad Jul 01 '18 at 05:15

Jason · Answer 2 · 2018-07-05T17:05:54.053

To expand on the answer from @Payam Khaninejad once you've forked the Jupyter Lab project you need to find the variables.css file and make your desired edits.

Then you can join the current (as of posting) issue on Github https://github.com/jupyterlab/jupyterlab/issues/3855 and get help to format your pull request to conform to the style used by the Jupyter Lab project. Info on contributing to the project here.

Here's a reply I wrote another question detailing the steps to make changes to the Jupyter Lab interface:

To edit Jupypter Lab themes you need to make changes to the file variables.css which is located in jupyterlab/packages/[THEME NAME]/style/

You can inspect the element of the Jupyter Lab that you'd like to change to find out its class. I used Chrome DevTools ctrl+shift+i and click on various div classes until I found the one I wanted to alter.

Once you have the name of the div class you'd like to customize, add the changes to the variables.css file. Here's what I changed and the result.

.jp-RenderedImage {
  background-color: #A4A4A4
}

You can use this gist (where the code in the first cell comes from) created by one of the JupyterLab contributors to experiment with changes you made to the variables.css file.

adnan2nd · Accepted Answer · 2019-05-29T18:07:34.750

we are using version 0.35.x ... the following steps worked for me ... it will create a clone of the light theme, would install it in jupyter lab and you would be able to select that from settings menu. you can customize this theme, build it and have the effect in jupyter lab

install miniconda from here https://docs.conda.io/en/latest/miniconda.html (chose python3.7 one)
open Anaconda Terminal, [in windows goto search type Anaconda, select the terminal]
then run this conda create -n jupyterlab-ext -c conda-forge --override-channels nodejs jupyterlab cookiecutter git
clone jupyterlab from here https://github.com/jupyterlab/jupyterlab.git
switch branch with git checkout 0.35.x
then jlpm install jlpm build npm run create:theme
copy the theme folder to your chosen local theme folder for extension development. Replace tsconfig.json content with the following

{ "compilerOptions": { "declaration": true, "lib": ["es2015", "dom"], "module": "commonjs", "moduleResolution": "node", "noEmitOnError": true, "noUnusedLocals": true, "outDir": "lib", "rootDir": "src", "strict": true, "strictNullChecks": false, "target": "es2015", "types": [] }, "include": ["src/*"] } [created by the steps here https://jupyterlab.readthedocs.io/en/stable/developer/xkcd_extension_tutorial.html#xkcd-extension-tutorial]

inside the theme folder ..

run the following commands jlpm install, jlpm run build , jlpm run build:webpack
open another conda terminal, there go to repo folder and run conda activate jupyterlab-ext then jupyter labextension install .
in a conda terminal conda activate jupyterlab-ext then, jupyter lab --watch

For version 1.0 , this cookie cutter could be used ... https://github.com/jupyterlab/theme-cookiecutter

How to edit jupyter lab theme

3 Answers3

Linked