ENH: Background color matches JupyterLab theme color

Author: thewtex

examples/3DImage.ipynb

@@ -41,13 +41,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 4,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "07a7f605229a4f8aa85ccd388ea88d47",
+       "model_id": "128f87def74b440baed35bb99b28198a",
        "version_major": 2,
        "version_minor": 0
       },
@@ -63,6 +63,13 @@
     "image = itk.imread(file_name)\n",
     "view(image, rotate=True, vmin=4000, vmax=17000, gradient_opacity=0.4)"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {

js/lib/viewer.js

@@ -127,8 +127,19 @@ const createRenderingPipeline = (domWidgetView, { rendered_image, point_sets, ge
     overflow: 'hidden',
     display: 'block-inline'
   };
+  let backgroundColor = [1.0, 1.0, 1.0];
+  const bodyBackground = getComputedStyle(document.body).getPropertyValue('background-color');
+  if (!!bodyBackground) {
+    // Separator can be , or space
+    const sep = bodyBackground.indexOf(",") > -1 ? "," : " ";
+    // Turn "rgb(r,g,b)" into [r,g,b]
+    const rgb = bodyBackground.substr(4).split(")")[0].split(sep);
+    backgroundColor[0] = rgb[0] / 255.0;
+    backgroundColor[1] = rgb[1] / 255.0;
+    backgroundColor[2] = rgb[2] / 255.0;
+  }
   const viewerStyle = {
-    backgroundColor: [1.0, 1.0, 1.0],
+    backgroundColor,
     containerStyle: containerStyle,
   };
   let is3D = true