Repository: dask/distributed

Issue:
Cluster HTML repr doesn't respect JupyterLab themes
Transferring https://github.com/coiled/coiled-issues/issues/51 to this project.

**What happened**:

Without ipywidgets installed, the HTML repr of a `Cluster` is hard to read in a dark theme:
![image](https://user-images.githubusercontent.com/11656932/90829505-7b3a9580-e305-11ea-991f-66650a9d245e.png)

**What you expected to happen**:

The HTML repr would display using colors from the Jupyter theme, for easier readability.

**Minimal Complete Verifiable Example**:

Set the JupyterLab theme to dark (Settings > JupyterLab theme) and run in a notebook:

```python
from dask.distributed import LocalCluster

cluster = LocalCluster()
cluster
```

**Anything else we need to know?**:

Rather than hardcoding colors, you could pull them from CSS variables defined by the theme; something like

```css
background-color: var(--jp-cell-editor-background);
border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
display: inline-block;
padding: 10px;
```

(I'm sure there are canonically correct CSS variables to use here, I just grabbed whatever looked right.)

Using that produces:
![image](https://user-images.githubusercontent.com/3309802/90827137-e7fb6300-e2f8-11ea-9e3b-121c94c64e87.png)

![image](https://user-images.githubusercontent.com/3309802/90827324-488aa000-e2f9-11ea-9483-4c05b0631cf7.png)

Downside is that these variables don't work for classic notebooks, though there are probably some other variables (or fallbacks) you could use.

**Environment**:

- Dask version: 2.23.0
- Python version: 3.7.5
- Operating System: Linux
- Install method (conda, pip, source): pip



Discussion:
Thank you for the issue @gjoseph92 , and my apologies for the delay in response.  cc'ing @jacobtomlinson and @ian-r-rose 


I support this, it would be useful.

This is a Jupyter Lab specific change, so we would need to test against other notebook compatible tools like classic notebooks, VSCode and Nteract to ensure things have sensible defaults.
Sorry, I missed this the first time around -- it should be fairly straightforward to do this. We would just have to inline the CSS variables in the IPython reprs (with fallback values so it will be rendered correctly in non-JupyterLab environments)

Resolving patch:
diff --git a/distributed/client.py b/distributed/client.py
--- a/distributed/client.py
+++ b/distributed/client.py
@@ -399,19 +399,27 @@ def __repr__(self):
     def _repr_html_(self):
         text = "<b>Future: %s</b> " % html.escape(key_split(self.key))
         text += (
-            '<font color="gray">status: </font>'
-            '<font color="%(color)s">%(status)s</font>, '
+            '<font style="color: var(--jp-ui-font-color2, gray)">status: </font>'
+            '<font style="color: %(color)s">%(status)s</font>, '
         ) % {
             "status": self.status,
-            "color": "red" if self.status == "error" else "black",
+            "color": "var(--jp-error-color0, red)"
+            if self.status == "error"
+            else "var(--jp-ui-font-color0, black)",
         }
         if self.type:
             try:
                 typ = self.type.__module__.split(".")[0] + "." + self.type.__name__
             except AttributeError:
                 typ = str(self.type)
-            text += '<font color="gray">type: </font>%s, ' % typ
-        text += '<font color="gray">key: </font>%s' % html.escape(str(self.key))
+            text += (
+                '<font style="color: var(--jp-ui-font-color2, gray)">type: </font>%s, '
+                % typ
+            )
+        text += (
+            '<font style="color: var(--jp-ui-font-color2, gray)">key: </font>%s'
+            % html.escape(str(self.key))
+        )
         return text
 
     def __await__(self):
diff --git a/distributed/deploy/cluster.py b/distributed/deploy/cluster.py
--- a/distributed/deploy/cluster.py
+++ b/distributed/deploy/cluster.py
@@ -388,8 +388,9 @@ def _repr_html_(self):
         else:
             dashboard = "Not Available"
         return (
-            "<div style='background-color: #f2f2f2; display: inline-block; "
-            "padding: 10px; border: 1px solid #999999;'>\n"
+            "<div style='color: var(--jp-ui-font-color0, #000000); "
+            "background-color: var(--jp-layout-color2, #f2f2f2); display: inline-block; "
+            "padding: 10px; border: 1px solid var(--jp-border-color0, #999999);'>\n"
             "  <h3>{cls}</h3>\n"
             "  <ul>\n"
             "    <li><b>Dashboard: </b>{dashboard}\n"


Test patch: