3

I am working in an environment with multiple servers and would like to share my .jupyter configuration amongst the servers such that I don't have to keep them in sync manually. This can be achieved easily by setting the JUPYTER_CONFIG_DIR environment variable to a shared location.

However, I would like to use different CSS style sheets for each server such that it is obvious which one I am working on. For example, on the first server, I would like to have a red background:

#notebook { background: red; }

and on the second, I would like to have a blue background.

#notebook { background: blue; }

I thought I might be able to achieve this by appending different paths to the extra_static_paths depending on the hostname of the jupyter server. However, the HTML of the notebook looks for custom/custom.css and the files indicated by extra_static_paths are served from static/... such that I cannot replace the custom css file in this manner.

Is there a better approach?

Till Hoffmann
  • 9,479
  • 6
  • 46
  • 64

1 Answers1

7

I think that can be achieved with profiles, but the documentation is scarce on the topic.

EDIT: I was wrong. According to this question the profiles are gone since jupyter 4.x, so unless you want to go into managing shared directories and files through bash scripting, it seems the following is the only solution.

While technically a workaround, this might be preferable: use the Stylish browser extension. I use it to quickly1 swap between the notebook's default white theme and a darker one.

How Stylish works

Basically it injects custom CSS in the pages that are matched by a rule at the top of a theme. You can write your own CSS theme or download one from their website. For a jupyter example, I am using this one. It matches on the following rules:

url-prefix("http://localhost:8888/"), 
url-prefix("http://127.0.0.1:8888/"),
url-prefix("http://localhost:8889/"),
url-prefix("http://localhost:8890/")

What you can do is duplicate this theme and have each one of them match on a single port, which corresponds to the server where you want it applied. Then you can start your servers with the --port=xxxx option.


1 -- You can change the notebook's theme by placing a custom CSS file somewhere in the jupyter's config directory, but if you want to change it on the fly you have to replace that file every time. With stylish, the change is 1 click away.

Community
  • 1
  • 1
Ciprian Tomoiagă
  • 3,773
  • 4
  • 41
  • 65
  • Great idea! Turns out the desired behaviour can also be achieved using tampermonkey/greasemonkey by just injecting different css depending on the url. – Till Hoffmann Oct 12 '16 at 06:38