Fix voila theme (#142)

* initialize theme based on app

* fix toggle theme size

Author: mbektas

src/datagrid.ts

@@ -268,8 +268,7 @@ export
   class DataGridView extends DOMWidgetView {
   _createElement(tagName: string) {
     this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
-    // initialize to light theme unless set earlier
-    this._isLightTheme = this._isLightTheme === undefined ? true : this._isLightTheme;
+    this._initializeTheme();
     return this.pWidget.node;
   }
 
@@ -434,6 +433,19 @@ export
     this.grid.renderers = renderers;
   }
 
+  private _initializeTheme() {
+    // initialize theme unless set earlier
+    if (this._isLightTheme !== undefined) {
+      return;
+    }
+
+    // initialize theme based on application settings
+    this._isLightTheme = !(
+      document.body.classList.contains('theme-dark') /* jupyter notebook or voila */ ||
+      document.body.dataset.jpThemeLight === 'false' /* jupyter lab */
+    );
+  }
+
   renderers: Dict<CellRendererView>;
   default_renderer: CellRendererView;
   grid: FeatherGrid;

widget-examples/basic/index.ts

@@ -233,7 +233,7 @@ function main() {
   buttonBoxPanel.addWidget(bw);
   const spacer = new Widget();
   buttonBoxPanel.addWidget(spacer);
-  BoxPanel.setSizeBasis(bw, 100);
+  BoxPanel.setSizeBasis(bw, 120);
   BoxPanel.setStretch(spacer, 1);
 
   boxPanel.addWidget(buttonBoxPanel);